Permitir el encabezado Access-Control-Allow-Origin mediante la API de recuperación de HTML5

Estoy usando la API de recuperación de HTML5.

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Puedo usar json normal pero no puedo recuperar los datos de la URL de la API anterior. Lanza error:

La API de recuperación no puede cargar https://davidwalsh.name/demo/arsenal.json . No hay un encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' http: // localhost '. Si una respuesta opaca satisface sus necesidades, configure el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.

Como dijo epascarello, el servidor que aloja el recurso debe tener CORS habilitado. Lo que puede hacer en el lado del cliente (y probablemente en lo que está pensando) es establecer el modo de recuperación en CORS (aunque creo que esta es la configuración predeterminada):

fetch(request, {mode: 'cors'});

Sin embargo, esto aún requiere que el servidor habilite CORS también y permita que su dominio solicite el recurso.

Consulte la documentación de CORS y este increíble video de Udacity que explica la Política del mismo origen .

También puede usar el modo no-cors en el lado del cliente, pero esto solo le dará una respuesta opaca (no puede leer el cuerpo, pero la respuesta aún puede ser almacenada en caché por un trabajador del servicio o consumida por algunas API, como <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Tenía mi código de front-end ejecutándose en http: // localhost: 3000 y mi API (código de backend) ejecutándose en http: // localhost: 5000

Estaba usando fetch API para llamar a la API. Inicialmente, estaba arrojando un error "cors". Luego agregué este código a continuación en mi código de API de backend, lo que permite el origen y el encabezado desde cualquier lugar.

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

Sin embargo, debe restringir los orígenes en el caso de otros entornos como stage, prod.

Esto funcionó para mí:

npm install -g local-cors-proxy

Punto final de API que queremos solicitar que tiene problemas de CORS:

https://www.yourdomain.com/test/list

Iniciar Proxy:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

Luego, en su código de cliente, nuevo punto final de API:

http://localhost:8010/proxy/test/list

El resultado final será una solicitud a https://www.yourdomain.ie/test/list sin los problemas de CORS.

Sé que esta es una publicación anterior, pero descubrí que lo que me funcionó para corregir este error fue usar la dirección IP de mi servidor en lugar de usar el nombre de dominio dentro de mi solicitud de búsqueda. Así por ejemplo:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Si usa nginx, intente esto

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Mire https://expressjs.com/en/resources/middleware/cors.html Tiene que usar cors.

Instalar en pc:

$ npm install cors

const cors = require('cors');
app.use(cors());

Tienes que poner este código en tu servidor de nodo.