CORS mortel quand http: // localhost est l'origine

Je suis coincé avec ce problème CORS, même si j'ai défini le serveur (nginx / node.js) avec les en-têtes appropriés.

Je peux voir dans le volet Réseau Chrome -> En-têtes de réponse:

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

ce qui devrait faire l'affaire.

Voici le code que j'utilise maintenant pour tester:

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

Je reçois

XMLHttpRequest ne peut pas charger http://stackoverflow.com/ . Origin http: // localhost n'est pas autorisé par Access-Control-Allow-Origin.

Je soupçonne que c'est un problème dans le script client et non dans la configuration du serveur ...

Chrome ne prend pas en charge localhost pour les requêtes CORS (un bug ouvert en 2010, marqué WontFix en 2014).

Pour contourner cela, vous pouvez utiliser un domaine comme lvh.me(qui pointe à 127.0.0.1 tout comme localhost) ou démarrer chrome avec l' --disable-web-securityindicateur (en supposant que vous ne faites que tester).

Selon la réponse de @ Beau, Chrome ne prend pas en charge les requêtes CORS de l'hôte local, et il est peu probable qu'un changement dans ce sens.

J'utilise l' extension Allow-Control-Allow-Origin: * Chrome pour contourner ce problème. L'extension ajoutera les en-têtes HTTP nécessaires pour CORS:

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

Le code source est publié sur Github .

Notez que l'extension filtre toutes les URL par défaut. Cela peut casser certains sites Web (par exemple: Dropbox). Je l'ai modifié pour filtrer uniquement les URL de l' hôte local avec le filtre d'URL suivant

*://localhost:*/*

Le vrai problème est que si nous définissons -Allow-toutes les demandes ( OPTIONS& POST), Chrome l'annulera. Le code suivant fonctionne pour moi avec POSTLocalHost avec 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 fera très bien des demandes avec CORS depuis une localhostorigine. Ce n'est pas un problème avec Chrome.

La raison pour laquelle vous ne pouvez pas charger http://stackoverflow.comest que les en- Access-Control-Allow-Origintêtes ne permettaient pas votre localhostorigine.

Aucune des extensions n'a fonctionné pour moi, j'ai donc installé un simple proxy local. Dans mon cas https://www.npmjs.com/package/local-cors-proxy C'est une configuration de 2 minutes:

(depuis leur site)

npm install -g local-cors-proxy

Point de terminaison d'API que nous voulons demander et qui présente des problèmes CORS: https://www.yourdomain.ie/movies/list

Démarrez le proxy: lcp --proxyUrl https://www.yourdomain.ie

Puis dans votre code client, nouveau point de terminaison d'API: http://localhost:8010/proxy/movies/list

Cela a fonctionné comme un charme pour moi: votre application appelle le proxy, qui appelle le serveur. Aucun problème CORS.

Correction de l'extension Chrome rapide et sale:

Changeur Moesif Orign & CORS

Cependant, Chrome prend en charge les demandes d'origine croisée de localhost. Assurez-vous d'ajouter un en-tête pour Access-Control-Allow-Originpour localhost.

J'ai décidé de ne pas toucher les en-têtes et de faire une redirection côté serveur à la place et cela fonctionne comme un charme.

L'exemple ci-dessous concerne la version actuelle d'Angular (actuellement 9) et probablement tout autre framework utilisant des webpacks DevServer. Mais je pense que le même principe fonctionnera sur d'autres backends.

J'utilise donc la configuration suivante dans le fichier proxy.conf.json :

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

En cas d'Angular, je sers avec cette configuration:

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

Je préfère utiliser le proxy dans la commande serve, mais vous pouvez également mettre cette configuration dans angular.json comme ceci:

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

Voir également:

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

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

La solution consiste à installer une extension qui lève le blocage que fait Chrome, par exemple:

Contrôle d'accès-Autoriser-Origine - Débloquer ( https://add0n.com/access-control.html?version=0.1.5&type=install ).