javascript - ¿Por qué no funciona el origen CORS de mi http://localhost?

Estoy atascado con este problema de CORS, aunque he configurado el servidor (nginx/node.js) con los encabezados apropiados.

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

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

lo cual debería funcionar.

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();

Entiendo

XMLHttpRequest no puede cargar http://stackoverflow.com/. El 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...

Respuesta #1

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

Para evitar esto, puedes usar un dominio como localho.st (que apunta a 127.0.0.1 al igual que localhost) o iniciar Chrome con el indicador --disable-web-security (suponiendo que solo estés probando).

Respuesta #2

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

Utilizo la extensión de Chrome Allow-Control-Allow-Origin: * para evitar este problema. La extensión añadirá 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 está publicado en Github.

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

*://localhost:*/*

Respuesta #3

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 de extremidad de API al que queremos hacer la solicitud y que tiene problemas de CORS: https://www.yourdomain.ie/movies/list
Iniciar Proxy: lcp --proxyUrl https://www.yourdomain.ie
Luego, en tu código cliente, nuevo endpoint de API: http://localhost:8010/proxy/movies/list

Funcionó de maravilla para mí: tu aplicación llama al proxy, que llama al servidor. Cero problemas de CORS.

Respuesta #4

El verdadero problema es que si configuramos -Allow- para todas las solicitudes (OPTIONS y POST), Chrome las cancelará. El siguiente código funciona para mí con POST a LocalHost 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);
} 
?>

Respuesta #5

Chrome hará solicitudes con CORS desde un origen localhost sin ningún problema. Esto no es un problema con Chrome.