CORS mortali quando http: // localhost è l'origine

Sono bloccato con questo problema CORS, anche se ho impostato il server (nginx / node.js) con le intestazioni appropriate.

Posso vedere nel riquadro Rete Chrome -> Intestazioni di risposta:

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

che dovrebbe fare il trucco.

Ecco il codice che ora uso per testare:

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

ottengo

XMLHttpRequest non può caricare http://stackoverflow.com/ . Origin http: // localhost non è consentito da Access-Control-Allow-Origin.

Sospetto che sia un problema nello script client e non nella configurazione del server ...

Chrome non supporta localhost per richieste CORS (un bug aperto nel 2010, contrassegnato WontFix nel 2014).

Per ovviare a questo, puoi usare un dominio come lvh.me(che punta a 127.0.0.1 proprio come localhost) o avviare Chrome con il --disable-web-securityflag (supponendo che stai solo testando).

Secondo la risposta di @ Beau, Chrome non supporta le richieste CORS di localhost e è improbabile che si verifichino cambiamenti in questa direzione.

Uso l' estensione Allow-Control-Allow-Origin: * Chrome per risolvere questo problema. L'estensione aggiungerà le intestazioni HTTP necessarie per CORS:

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

Il codice sorgente è pubblicato su Github .

Si noti che l'estensione filtra tutti gli URL per impostazione predefinita. Ciò potrebbe interrompere alcuni siti Web (ad esempio: Dropbox). L'ho modificato per filtrare solo gli URL localhost con il seguente filtro URL

*://localhost:*/*

Il vero problema è che se impostiamo -Allow-tutte le richieste ( OPTIONS& POST), Chrome lo annullerà. Il seguente codice funziona per me con POSTLocalHost con 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 invierà richieste con CORS da a localhost un'origine bene. Questo non è un problema con Chrome.

Il motivo per cui non puoi caricare http://stackoverflow.comè che le Access-Control-Allow-Originintestazioni non consentivano la tua localhostorigine.

Correzione rapida e sporca dell'estensione di Chrome:

Moesif Orign & CORS Changer

Tuttavia, Chrome supporta le richieste di origine incrociata da localhost. Assicurati di aggiungere un'intestazione Access-Control-Allow-Originper localhost.

Nessuna delle estensioni ha funzionato per me, quindi ho installato un semplice proxy locale. Nel mio caso https://www.npmjs.com/package/local-cors-proxy È una configurazione di 2 minuti:

(dal loro sito)

npm install -g local-cors-proxy

Endpoint API che vogliamo richiedere con problemi CORS: https://www.yourdomain.ie/movies/list

Avvia proxy: lcp --proxyUrl https://www.yourdomain.ie

Quindi nel tuo codice client, nuovo endpoint API: http://localhost:8010/proxy/movies/list

Ha funzionato come per me: la tua app chiama il proxy, che chiama il server. Zero problemi CORS.

Ho deciso di non toccare le intestazioni e fare invece un reindirizzamento sul lato server e si sveglia come un fascino.

L'esempio che segue è per l'attuale versione di Angular (attualmente 9) e probabilmente qualsiasi altro framework che utilizza i webpack DevServer. Ma penso che lo stesso principio funzionerà su altri backend.

Quindi uso la seguente configurazione nel file proxy.conf.json :

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

In caso di Angular servo con quella configurazione:

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

Preferisco usare il proxy nel comando serve, ma puoi anche mettere questa configurazione su angular.json in questo modo:

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

Guarda anche:

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

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