CORS mortal cuando http: // localhost es el origen

Estoy atrapado con este problema CORS, aunque configuré el servidor (nginx / node.js) con los encabezados apropiados.

Puedo ver en el panel Red de Chrome -> Encabezados de respuesta:

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

que debería hacer el truco.

Aquí está el código que ahora uso para probar:

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

yo obtengo

XMLHttpRequest no puede cargar http://stackoverflow.com/ . Origen http: // localhost no está permitido por Access-Control-Allow-Origin.

Sospecho que es un problema en el script del cliente y no en la configuración del servidor ...

Chrome no admite localhost para solicitudes CORS (un error abierto en 2010, marcado WontFix en 2014).

Para evitar esto, puede usar un dominio como lvh.me(que apunta a 127.0.0.1 como localhost) o iniciar Chrome con la --disable-web-securitybandera (suponiendo que solo esté probando).

Según la respuesta de @ Beau, Chrome no admite las solicitudes locales de CORS, y es poco probable que haya algún cambio en esta dirección.

Utilizo la extensión de Chrome Allow-Control-Allow-Origin: * para solucionar este problema. La extensión agregará los encabezados HTTP necesarios para CORS:

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

El código fuente se publica en Github .

Tenga en cuenta que la extensión filtra todas las URL de forma predeterminada. Esto puede romper algunos sitios web (por ejemplo: Dropbox). Lo he cambiado para filtrar solo las URL de host local con el siguiente filtro de URL

*://localhost:*/*

El verdadero problema es que si configuramos -Allow-todas las solicitudes ( OPTIONS& POST), Chrome la cancelará. El siguiente código funciona para mí 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 hará solicitudes con CORS desde un localhostorigen muy bien. Esto no es un problema con Chrome.

La razón por la que no puede cargar http://stackoverflow.comes que los Access-Control-Allow-Originencabezados no permitían su localhostorigen.

Corrección rápida y sucia de la extensión de Chrome:

Cambiador Moesif Orign & CORS

Sin embargo, Chrome admite solicitudes de origen cruzado de localhost. Asegúrese de agregar un encabezado Access-Control-Allow-Originpara localhost.

Ninguna de las extensiones funcionó para mí, así que instalé un proxy local simple. En mi caso https://www.npmjs.com/package/local-cors-proxy Es una configuración de 2 minutos:

(de su sitio)

npm install -g local-cors-proxy

Punto final de API que queremos solicitar que tenga problemas CORS: https://www.yourdomain.ie/movies/list

Proxy de inicio: lcp --proxyUrl https://www.yourdomain.ie

Luego, en su código de cliente, nuevo punto final de API: http://localhost:8010/proxy/movies/list

Para mí funcionó a las mil maravillas: su aplicación llama al proxy, quien llama al servidor. Cero problemas CORS.

Decidí no tocar los encabezados y hacer una redirección en el lado del servidor, y funciona como un encanto.

El siguiente ejemplo es para la versión actual de Angular (actualmente 9) y probablemente para cualquier otro marco que use paquetes web DevServer. Pero creo que el mismo principio funcionará en otros backends.

Entonces uso la siguiente configuración en el archivo proxy.conf.json :

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

En caso de Angular, sirvo con esa configuración:

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

Prefiero usar el proxy en el comando de servicio, pero también puede poner esta configuración en angular.json de esta manera:

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

Ver también:

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

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