Http: // localhost kökeni olduğunda ölümcül CORS

Sunucuyu (nginx / node.js) uygun üstbilgilerle ayarlasam da bu CORS sorunuyla sıkışıp kaldım.

Chrome Ağ bölmesinde görebiliyorum -> Yanıt Başlıkları:

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

hile yapmalı.

İşte şimdi test etmek için kullandığım kod:

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

alırım

XMLHttpRequest http://stackoverflow.com/ dosyasını yükleyemiyor . Kökeni http: // localhost Erişim-Control-Allow-Origin tarafından izin verilmez.

Sunucu komut dosyasında değil, istemci komut dosyasında bir sorun olduğundan şüpheleniyorum ...

Chrome , CORS istekleri için localhost'u desteklemez (2010'da açılan, 2014'te WontFix olarak işaretlenmiş bir hata).

Bu lvh.mesorunu çözmek için, (localhost gibi 127.0.0.1'i işaret eden) bir alan adı kullanabilir veya --disable-web-securitybayrakla krom başlatabilirsiniz (yalnızca test ettiğiniz varsayılarak).

@ Beau'nun cevabına göre Chrome, localhost CORS isteklerini desteklemez ve bu yönde olası bir değişiklik yoktur.

Bu soruna geçici bir çözüm bulmak için Allow-Control-Allow-Origin: * Chrome Uzantısı'nı kullanıyorum. Uzantı, CORS için gerekli HTTP Üstbilgilerini ekleyecektir:

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

Kaynak kodu Github yayınlanmaktadır .

Uzantının varsayılan olarak tüm URL'leri filtrelediğini unutmayın. Bu, bazı web sitelerini bozabilir (örneğin: Dropbox). Yalnızca şu URL filtresine sahip localhost URL'lerini filtrelemek için değiştirdim

*://localhost:*/*

Asıl sorun, -Allow-tüm istek ( OPTIONS& POST) için ayarlarsak Chrome'un isteği iptal etmesidir. Aşağıdaki kod POST, Chrome ile LocalHost için benim için çalışıyor

<?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, CORS ile bir localhostkaynaktan gelen istekleri gayet iyi yapacak . Bu Chrome ile ilgili bir sorun değil.

Yükleyememenizin nedeni http://stackoverflow.com, Access-Control-Allow-Originbaşlıkların localhostkökeninize izin vermemesidir .

Hızlı ve kirli Chrome uzantı düzeltmesi:

Moesif Orign & CORS Değiştirici

Ancak Chrome, yerel ana bilgisayardan gelen çapraz kökenli istekleri desteklemez. İçin bir başlık eklemek için emin olun Access-Control-Allow-Originiçin localhost.

Uzantıların hiçbiri benim için çalışmadı, bu yüzden basit bir yerel proxy yükledim. Benim durumumda https://www.npmjs.com/package/local-cors-proxy 2 dakikalık bir kurulum:

(sitelerinden)

npm install -g local-cors-proxy

CORS sorunları olan istemek istediğimiz API uç noktası: https://www.yourdomain.ie/movies/list

Proxy'yi başlat: lcp --proxyUrl https://www.yourdomain.ie

Ardından müşteri kodunuzda yeni API uç noktası: http://localhost:8010/proxy/movies/list

Benim için bir cazibe gibi çalıştı: Uygulamanız sunucuyu arayan proxy'yi çağırır. Sıfır CORS problemleri.

Başlıklar dokunmamaya ve sunucu tarafında bir yönlendirme yapmamaya karar verdim ve bir cazibe gibi woks.

Aşağıdaki örnek Angular'ın (şu anda 9) geçerli sürümü ve muhtemelen DevServer web paketlerini kullanan diğer herhangi bir çerçeve içindir. Ancak aynı ilkenin diğer arka uçlarda da işe yarayacağını düşünüyorum.

Bu yüzden proxy.conf.json dosyasında aşağıdaki yapılandırmayı kullanıyorum :

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

Açısal olması durumunda bu konfigürasyonla hizmet veririm:

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

Sunum komutunda proxy kullanmayı tercih ederim, ancak bu yapılandırmayı aşağıdaki gibi angular.json öğesine de koyabilirsiniz :

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

Ayrıca bakınız:

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

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