AngularJS melakukan permintaan HTTP OPSI untuk sumber daya lintas asal

Saya mencoba mengatur AngularJS untuk berkomunikasi dengan sumber daya asal-silang di mana host aset yang memberikan file templat saya ada di domain yang berbeda dan oleh karena itu permintaan XHR yang berkinerja angular harus berupa cross-domain. Saya telah menambahkan header CORS yang sesuai ke server saya untuk permintaan HTTP untuk membuat ini berfungsi, tetapi tampaknya tidak berfungsi. Masalahnya adalah ketika saya memeriksa permintaan HTTP di browser saya (chrome), permintaan yang dikirim ke file aset adalah permintaan OPTIONS (seharusnya permintaan GET).

Saya tidak yakin apakah ini bug di AngularJS atau jika saya perlu mengkonfigurasi sesuatu. Dari apa yang saya pahami pembungkus XHR tidak dapat membuat permintaan HTTP OPSI sehingga sepertinya browser sedang mencari tahu apakah "diizinkan" untuk mengunduh aset terlebih dahulu sebelum melakukan permintaan GET. Jika demikian, apakah saya perlu mengatur header CORS (Access-Control-Allow-Origin: http://asset.host ... ) dengan host aset juga?

Permintaan PILIHAN sama sekali bukan bug AngularJS, beginilah standar Cross-Origin Resource Sharing memberi mandat browser untuk berperilaku. Silakan merujuk ke dokumen ini: https://developer.mozilla.org/en-US/docs/HTTP_access_control , di mana di bagian "Ikhtisar" disebutkan:

Standar Cross-Origin Resource Sharing bekerja dengan menambahkan header HTTP baru yang memungkinkan server untuk menggambarkan set asal yang diizinkan untuk membaca informasi tersebut menggunakan browser web. Selain itu, untuk metode permintaan HTTP yang dapat menyebabkan efek samping pada data pengguna (khususnya; untuk metode HTTP selain GET, atau untuk penggunaan POST dengan jenis MIME tertentu). Spesifikasi mengamanatkan bahwa browser "preflight" permintaan, meminta metode yang didukung dari server dengan header permintaan HTTP OPTIONS, dan kemudian, setelah "persetujuan" dari server, mengirimkan permintaan aktual dengan metode permintaan HTTP yang sebenarnya. Server juga dapat memberi tahu klien apakah "kredensial" (termasuk cookie dan data Otentikasi HTTP) harus dikirim bersama permintaan.

Sangat sulit untuk memberikan solusi umum yang akan bekerja untuk semua server WWW karena pengaturan akan bervariasi tergantung pada server itu sendiri dan kata kerja HTTP yang ingin Anda dukung. Saya akan mendorong Anda untuk melupakan artikel yang sangat bagus ini ( http://www.html5rocks.com/en/tutorials/cors/ ) yang memiliki lebih banyak detail tentang header yang tepat yang perlu dikirim oleh server.

Untuk Angular 1.2.0rc1 + Anda perlu menambahkan resourceUrlWhitelist.

1.2: versi rilis mereka menambahkan fungsi escapeForRegexp sehingga Anda tidak perlu lagi melarikan diri dari string. Anda bisa langsung menambahkan url

'http://sub*.assets.example.com/**' 

pastikan untuk menambahkan ** untuk sub folder. Berikut adalah jsbin yang berfungsi untuk 1.2: http://jsbin.com/olavok/145/edit

1.2.0rc: Jika Anda masih pada versi rc, Solusinya 1.2.0rc1 solusinya terlihat seperti:

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]);
 }])

Berikut adalah contoh jsbin di mana ia bekerja untuk 1.2.0rc1: http://jsbin.com/olavok/144/edit

Pra 1.2: Untuk versi yang lebih lama (ref http://better-inter.net/enabling-cors-in-angular-js/ ) Anda perlu menambahkan 2 baris berikut ke konfigurasi Anda:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

Berikut adalah contoh jsbin di mana ia berfungsi untuk versi pra 1.2: http://jsbin.com/olavok/11/edit

CATATAN: Tidak yakin itu berfungsi dengan versi terbaru Angular.

ASLI:

Dimungkinkan juga untuk mengabaikan permintaan OPSI (hanya diuji di Chrome):

app.config(['$httpProvider', function ($httpProvider) {
  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}]);

Layanan Anda harus menjawab OPTIONSpermintaan dengan tajuk seperti ini:

Access-Control-Allow-Origin: [the same origin from the request]
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]

Berikut ini adalah dokumen yang bagus: http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

Dokumen yang sama mengatakan

Tidak seperti permintaan sederhana (dibahas di atas), permintaan "preflighted" pertama-tama mengirim tajuk permintaan HTTP OPTIONS ke sumber daya di domain lain, untuk menentukan apakah permintaan sebenarnya aman untuk dikirim. Permintaan lintas-situs telah ditetapkan sebelumnya seperti ini karena mungkin memiliki implikasi pada data pengguna. Secara khusus, permintaan sudah dicetak sebelumnya jika:

Ini menggunakan metode selain GET atau POST. Juga, jika POST digunakan untuk mengirim data permintaan dengan Tipe-Konten selain dari aplikasi / x-www-form-urlencoded, multipart / form-data, atau teks / plain, misalnya jika permintaan POST mengirimkan payload XML ke server menggunakan aplikasi / xml atau teks / xml, maka permintaannya sudah disorot.

Itu mengatur header kustom dalam permintaan (mis. Permintaan menggunakan header seperti X-PINGOTHER)

Ketika permintaan asli Dapatkan tanpa header khusus, browser tidak boleh membuat permintaan Pilihan yang sekarang. Masalahnya adalah ia menghasilkan header X-Diminta-Dengan yang memaksa permintaan Opsi. Lihat https://github.com/angular/angular.js/pull/1454 tentang cara menghapus tajuk ini

Ini memperbaiki masalah saya:

$http.defaults.headers.post["Content-Type"] = "text/plain";

Jika Anda menggunakan server nodeJS, Anda dapat menggunakan perpustakaan ini, itu berfungsi dengan baik untuk saya https://github.com/expressjs/cors

var express = require('express')
  , cors = require('cors')
  , app = express();

app.use(cors());

dan setelah itu kamu bisa melakukan npm update.

Inilah cara saya memperbaiki masalah ini pada ASP.NET

• Pertama, Anda harus menambahkan paket nuget Microsoft.AspNet.WebApi.Cors

• Kemudian modifikasi file App_Start \ WebApiConfig.cs

  public static class WebApiConfig    
  {
     public static void Register(HttpConfiguration config)
     {
        config.EnableCors();
  
        ...
     }    
  }

• Tambahkan atribut ini pada kelas controller Anda

  [EnableCors(origins: "*", headers: "*", methods: "*")]
  public class MyController : ApiController
  {  
      [AcceptVerbs("POST")]
      public IHttpActionResult Post([FromBody]YourDataType data)
      {
           ...
           return Ok(result);
      }
  }

• Saya bisa mengirim json ke aksi dengan cara ini

  $http({
          method: 'POST',
          data: JSON.stringify(data),
          url: 'actionurl',
          headers: {
              'Content-Type': 'application/json; charset=UTF-8'
          }
      }).then(...)

Referensi: Mengaktifkan Permintaan Lintas-Asal di ASP.NET Web API 2

Entah bagaimana saya memperbaikinya dengan mengubah

<add name="Access-Control-Allow-Headers" 
     value="Origin, X-Requested-With, Content-Type, Accept, Authorization" 
     />

untuk

<add name="Access-Control-Allow-Headers" 
     value="Origin, Content-Type, Accept, Authorization" 
     />

Dijelaskan dengan sempurna dalam komentar pkozlowski. Saya punya solusi yang berfungsi dengan AngularJS 1.2.6 dan ASP.NET Web Api tetapi ketika saya telah memutakhirkan AngularJS ke 1.3.3 maka permintaan gagal.

• Solusi untuk server Web Api adalah menambahkan penanganan permintaan OPSI di awal metode konfigurasi (info lebih lanjut di posting blog ini ):

  app.Use(async (context, next) =>
  {
      IOwinRequest req = context.Request;
      IOwinResponse res = context.Response;
      if (req.Path.StartsWithSegments(new PathString("/Token")))
      {
          var origin = req.Headers.Get("Origin");
          if (!string.IsNullOrEmpty(origin))
          {
              res.Headers.Set("Access-Control-Allow-Origin", origin);
          }
          if (req.Method == "OPTIONS")
          {
              res.StatusCode = 200;
              res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST");
              res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type");
              return;
          }
      }
      await next();
  });

Jika Anda menggunakan Jersey untuk API REST, Anda dapat melakukannya seperti di bawah ini

Anda tidak perlu mengubah implementasi layanan web Anda.

Saya akan menjelaskan untuk Jersey 2.x

1) Pertama-tama tambahkan ResponseFilter seperti yang ditunjukkan di bawah ini

import java.io.IOException;

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;

public class CorsResponseFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext requestContext,   ContainerResponseContext responseContext)
    throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin","*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

  }
}

2) kemudian di web.xml, dalam deklarasi servlet jersey tambahkan di bawah ini

    <init-param>
        <param-name>jersey.config.server.provider.classnames</param-name>
        <param-value>YOUR PACKAGE.CorsResponseFilter</param-value>
    </init-param>

Saya menyerah berusaha memperbaiki masalah ini.

Web.config IIS saya memiliki " Access-Control-Allow-Methods" yang relevan di dalamnya, saya bereksperimen menambahkan pengaturan konfigurasi ke kode Angular saya, tetapi setelah membakar beberapa jam mencoba membuat Chrome memanggil layanan web JSON lintas-domain, saya menyerah dengan sedih.

Pada akhirnya, saya menambahkan bodoh ASP.Net handler halaman web, mendapat bahwa untuk memanggil layanan JSON web saya, dan mengembalikan hasil. Sudah berjalan dan dalam 2 menit.

Berikut kode yang saya gunakan:

public class LoadJSONData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string URL = "......";

        using (var client = new HttpClient())
        {
            // New code:
            client.BaseAddress = new Uri(URL);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            client.DefaultRequestHeaders.Add("Authorization", "Basic AUTHORIZATION_STRING");

            HttpResponseMessage response = client.GetAsync(URL).Result;
            if (response.IsSuccessStatusCode)
            {
                var content = response.Content.ReadAsStringAsync().Result;
                context.Response.Write("Success: " + content);
            }
            else
            {
                context.Response.Write(response.StatusCode + " : Message - " + response.ReasonPhrase);
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

Dan di pengontrol sudut saya ...

$http.get("/Handlers/LoadJSONData.ashx")
   .success(function (data) {
      ....
   });

Saya yakin ada cara yang lebih sederhana / lebih umum untuk melakukan ini, tetapi hidup ini terlalu singkat ...

Ini bekerja untuk saya, dan saya bisa melanjutkan pekerjaan normal sekarang !!

Untuk IIS MVC 5 / Angular CLI (Ya, saya sangat menyadari masalah Anda dengan Angular JS) proyek dengan API Saya melakukan hal berikut:

web.config di bawah <system.webServer>simpul

    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, atv2" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
    </httpProtocol>

global.asax.cs

protected void Application_BeginRequest() {
  if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) && Request.HttpMethod == "OPTIONS") {
    Response.Flush();
    Response.End();
  }
}

Itu akan memperbaiki masalah Anda untuk MVC dan WebAPI tanpa harus melakukan yang lainnya. Saya kemudian membuat HttpInterceptor di proyek Angular CLI yang secara otomatis ditambahkan dalam informasi header yang relevan. Semoga ini bisa membantu seseorang keluar dalam situasi serupa.

Sedikit terlambat ke pesta,

Jika Anda menggunakan Angular 7 (atau 5/6/7) dan PHP sebagai API dan masih mendapatkan kesalahan ini, coba tambahkan opsi tajuk berikut ke titik akhir (PHP API).

 header("Access-Control-Allow-Origin: *");
 header("Access-Control-Allow-Methods: PUT, GET, POST, PUT, OPTIONS, DELETE, PATCH");
 header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization");

Catatan : Yang dibutuhkan hanyalah Access-Control-Allow-Methods. Tapi, saya menempelkan di sini dua lainnya Access-Control-Allow-OrigindanAccess-Control-Allow-Headers , hanya karena Anda perlu semua ini diatur dengan benar agar Aplikasi Angular dapat berbicara dengan benar ke API Anda.

Semoga ini bisa membantu seseorang.

Bersulang.