CORS mortal quando http: // localhost é a origem

Estou com esse problema do CORS, apesar de definir o servidor (nginx / node.js) com os cabeçalhos apropriados.

Eu posso ver no painel Rede do Chrome -> Cabeçalhos de resposta:

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

o que deve fazer o truque.

Aqui está o código que agora uso para testar:

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

eu recebo

XMLHttpRequest não pode carregar http://stackoverflow.com/ . Origem http: // localhost não é permitido pelo Access-Control-Allow-Origin.

Eu suspeito que é um problema no script do cliente e não na configuração do servidor ...

O Chrome não suporta host local para solicitações do CORS (um bug aberto em 2010, marcado WontFix em 2014).

Para contornar isso, você pode usar um domínio como lvh.me(que aponta para 127.0.0.1 como localhost) ou iniciar o chrome com a --disable-web-securityflag (assumindo que você está apenas testando).

De acordo com a resposta do @ Beau, o Chrome não suporta solicitações CORS do host local e é improvável que haja alguma alteração nessa direção.

Eu uso o Allow-Control-Allow-Origin: * Extensão do Chrome para solucionar esse problema. A extensão adicionará os cabeçalhos HTTP necessários para o CORS:

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

O código fonte é publicado no Github .

Observe que a extensão filtra todos os URLs por padrão. Isso pode quebrar alguns sites (por exemplo: Dropbox). Alterei-o para filtrar apenas URLs de host local com o seguinte filtro de URL

*://localhost:*/*

O verdadeiro problema é que, se definirmos -Allow-para todas as solicitações ( OPTIONS& POST), o Chrome a cancelará. O código a seguir funciona para mim POSTno LocalHost com 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);
} 
?>

O Chrome fará solicitações com o CORS de uma localhostorigem muito bem. Este não é um problema com o Chrome.

O motivo pelo qual você não pode carregar http://stackoverflow.comé que os Access-Control-Allow-Origincabeçalhos não estavam permitindo sua localhostorigem.

Correção de extensão rápida e suja do Chrome:

Moesif Orign & CORS Changer

No entanto, o Chrome suporta solicitações de origem cruzada do host local. Certifique-se de adicionar um cabeçalho para Access-Control-Allow-Originfor localhost.

Nenhuma das extensões funcionou para mim, então instalei um proxy local simples. No meu caso, https://www.npmjs.com/package/local-cors-proxy É uma configuração de 2 minutos:

(do site deles)

npm install -g local-cors-proxy

Terminal da API que queremos solicitar que tenha problemas com o CORS: https://www.yourdomain.ie/movies/list

Iniciar Proxy: lcp --proxyUrl https://www.yourdomain.ie

Em seguida, no código do cliente, novo ponto de extremidade da API: http://localhost:8010/proxy/movies/list

Funcionou como um encanto para mim: seu aplicativo chama o proxy, que chama o servidor. Zero problemas de CORS.

Decidi não tocar nos cabeçalhos e fazer um redirecionamento no lado do servidor e ele funciona como um encanto.

O exemplo abaixo é para a versão atual do Angular (atualmente 9) e provavelmente qualquer outra estrutura usando os DevServer dos webpacks. Mas acho que o mesmo princípio funcionará em outros back-ends.

Então, eu uso a seguinte configuração no arquivo proxy.conf.json :

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

No caso do Angular, eu sirvo com essa configuração:

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

Eu prefiro usar o proxy no comando serve, mas você também pode colocar essa configuração em angular.json assim:

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

Veja também:

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

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