Permitir cabeçalho Access-Control-Allow-Origin usando HTML5 fetch API

Estou usando a API de busca 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)
});

Consigo usar o json normal, mas não consigo buscar os dados do URL da API acima. Ele gera um erro:

A API de busca não pode carregar https://davidwalsh.name/demo/arsenal.json . Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, o acesso de origem ' http: // localhost ' não é permitido. Se uma resposta opaca atender às suas necessidades, defina o modo da solicitação como 'no-cors' para buscar o recurso com o CORS desativado.

Como disse epascarello, o servidor que hospeda o recurso precisa ter o CORS habilitado. O que você pode fazer no lado do cliente (e provavelmente no que você está pensando) é definir o modo de busca para CORS (embora esta seja a configuração padrão, eu acredito):

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

No entanto, isso ainda requer que o servidor habilite o CORS também e permita que seu domínio solicite o recurso.

Confira a documentação do CORS e este incrível vídeo Udacity explicando a política da mesma origem .

Você também pode usar o modo no-cors no lado do cliente, mas isso apenas fornecerá uma resposta opaca (você não pode ler o corpo, mas a resposta ainda pode ser armazenada em cache por um service worker ou consumida por algumas APIs, como <img>) :

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

Eu tinha meu código de front-end em http: // localhost: 3000 e minha API (código de back-end) em http: // localhost: 5000

Estava usando fetch API para chamar a API. Inicialmente, ele estava jogando o erro "cors". Em seguida, adicionei o código abaixo em meu código da API Backend, permitindo origem e cabeçalho de qualquer lugar.

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

No entanto, você deve restringir suas origens no caso de outros ambientes como stage, prod.

Isso funcionou para mim:

npm install -g local-cors-proxy

Endpoint de API que desejamos solicitar e que tem 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

Em seguida, em seu código de cliente, novo endpoint de API:

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

O resultado final será uma solicitação para https://www.yourdomain.ie/test/list sem os problemas do CORS!

Sei que esta é uma postagem mais antiga, mas descobri que o que funcionou para corrigir esse erro foi usar o endereço IP do meu servidor em vez de usar o nome de domínio na minha solicitação de busca. Então, por exemplo:

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

Se você estiver usando o nginx, tente isso

#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;
    }

Veja https://expressjs.com/en/resources/middleware/cors.html Você tem que usar cors.

Instalar:

$ npm install cors

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

Você deve colocar este código em seu servidor de nó.