CORS yang mematikan ketika http: // localhost adalah asalnya

Saya terjebak dengan masalah CORS ini, meskipun saya mengatur server (nginx / node.js) dengan header yang sesuai.

Saya dapat melihat di panel Jaringan Chrome -> Header Respons:

Access-Control-Allow-Origin:http://localhost

yang seharusnya melakukan trik.

Berikut kode yang sekarang saya gunakan untuk menguji:

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

saya mendapat

XMLHttpRequest tidak dapat memuat http://stackoverflow.com/ . Origin http: // localhost tidak diizinkan oleh Access-Control-Allow-Origin.

Saya menduga itu masalah dalam skrip klien dan bukan konfigurasi server ...

Chrome tidak mendukung localhost untuk permintaan CORS (bug dibuka pada 2010, ditandai WontFix pada 2014).

Untuk menyiasati ini, Anda dapat menggunakan domain seperti lvh.me(yang menunjuk 127.0.0.1 seperti localhost) atau mulai chrome dengan --disable-web-securitybendera (dengan asumsi Anda hanya menguji).

Per @ Beau menjawab, Chrome tidak mendukung permintaan CORS localhost, dan tidak mungkin ada perubahan dalam arah ini.

Saya menggunakan Allow-Control-Allow-Origin: * Ekstensi Chrome untuk mengatasi masalah ini. Ekstensi akan menambahkan Header HTTP yang diperlukan untuk CORS:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

The kode sumber dipublikasikan di Github .

Perhatikan bahwa ekstensi memfilter semua URL secara default. Ini dapat merusak beberapa situs web (misalnya: Dropbox). Saya telah mengubahnya untuk memfilter hanya URL host lokal dengan filter URL berikut

*://localhost:*/*

Masalah sebenarnya adalah bahwa jika kami menetapkan -Allow-untuk semua permintaan ( OPTIONS& POST), Chrome akan membatalkannya. Kode berikut berfungsi untuk saya bersama POSTdengan LocalHost dengan Chrome

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

Chrome akan membuat permintaan dengan CORS dari a localhost asal saja. Ini bukan masalah dengan Chrome.

Alasan Anda tidak dapat memuat http://stackoverflow.comadalah karena Access-Control-Allow-Origintajuk tidak mengizinkan sumber Anda localhost.

Perbaikan ekstensi Chrome yang cepat dan kotor:

Moesif Orign & CORS Changer

Namun, Chrome mendukung permintaan lintas asal dari localhost. Pastikan untuk menambahkan tajuk Access-Control-Allow-Originuntuk localhost.

Tidak ada ekstensi yang berfungsi untuk saya, jadi saya memasang proxy lokal sederhana. Dalam kasus saya https://www.npmjs.com/package/local-cors-proxy Ini adalah pengaturan 2 menit:

(dari situs mereka)

npm install -g local-cors-proxy

Titik akhir API yang ingin kami minta yang memiliki masalah CORS: https://www.yourdomain.ie/movies/list

Mulai Proxy: lcp --proxyUrl https://www.yourdomain.ie

Kemudian dalam kode klien Anda, titik akhir API baru: http://localhost:8010/proxy/movies/list

Bekerja seperti pesona bagi saya: aplikasi Anda memanggil proxy, yang memanggil server. Nol masalah CORS.

Saya memutuskan untuk tidak menyentuh header dan membuat pengalihan di sisi server sebagai gantinya dan itu wajan seperti pesona.

Contoh di bawah ini adalah untuk versi Angular saat ini (saat ini 9) dan mungkin kerangka kerja lainnya menggunakan webpacks DevServer. Tapi saya pikir prinsip yang sama akan bekerja pada backend lainnya.

Jadi saya menggunakan konfigurasi berikut di file proxy.conf.json :

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

Dalam kasus Angular saya melayani dengan konfigurasi itu:

$ ng serve -o --proxy-config=proxy.conf.json

Saya lebih suka menggunakan proxy di perintah serve, tetapi Anda juga dapat meletakkan konfigurasi ini ke angular.json seperti ini:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

Lihat juga:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy