Aparentemente, eu entendi completamente sua semântica. Pensei em algo assim:

1. Um cliente baixa o código javascript MyCode.js de http://siteA- a origem .
2. O cabeçalho de resposta do MyCode.js contém Access-Control-Allow-Originhttp://siteB :, que eu pensei que significava que o MyCode.js tinha permissão para fazer referências de origem cruzada ao site B.
3. O cliente aciona algumas funcionalidades do MyCode.js, que por sua vez fazem solicitações para http://siteB, o que deve ser bom, apesar de serem solicitações de origem cruzada.

Bem, eu estou errado. Não funciona assim. Portanto, li o compartilhamento de recursos de origem cruzada e tentei compartilhar o compartilhamento de recursos de origem cruzada na recomendação w3c

Uma coisa é certa - ainda não entendo como devo usar esse cabeçalho.

Eu tenho controle total do site A e do site B. Como habilito o código javascript baixado do site A para acessar recursos no site B usando esse cabeçalho?

PS

Eu não quero utilizar JSONP.

Access-Control-Allow-Originé um cabeçalho CORS (compartilhamento de recursos de origem cruzada) .

Quando o Site A tenta buscar conteúdo do Site B, o Site B pode enviar um Access-Control-Allow-Origincabeçalho de resposta para informar ao navegador que o conteúdo desta página é acessível para determinadas origens. (Uma origem é um domínio, mais um esquema e número de porta .) Por padrão, as páginas do Site B não são acessíveis a nenhuma outra origem ; o uso do Access-Control-Allow-Origincabeçalho abre uma porta para acesso entre origens, solicitando origens específicas.

Para cada recurso / página que o Site B deseja tornar acessível ao Site A, o Site B deve veicular suas páginas com o cabeçalho de resposta:

Access-Control-Allow-Origin: http://siteA.com

Navegadores modernos não bloquearão solicitações de vários domínios diretamente. Se o Site A solicitar uma página do Site B, o navegador buscará a página solicitada no nível da rede e verificará se os cabeçalhos de resposta listam o Site A como um domínio de solicitante permitido. Se Site B não indicou que o site A tem permissão para acessar esta página, o navegador irá acionar o XMLHttpRequest's errorevento e negar os dados de resposta ao código JavaScript requerente.

Pedidos não simples

O que acontece no nível da rede pode ser um pouco mais complexo do que o explicado acima. Se a solicitação for "não simples" , o navegador primeiro envia uma solicitação OPTIONS "sem comprovação" sem dados, para verificar se o servidor aceitará a solicitação. Uma solicitação não é simples quando (ou ambas):

• usando um verbo HTTP diferente de GET ou POST (por exemplo, PUT, DELETE)
• usando cabeçalhos de solicitação não simples; os únicos cabeçalhos de pedidos simples são:
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type(isso só é simples quando o seu valor é application/x-www-form-urlencoded, multipart/form-dataou text/plain)

Se o servidor responder ao comprovante de OPÇÕES com cabeçalhos de resposta apropriados ( Access-Control-Allow-Headerspara cabeçalhos não simples, Access-Control-Allow-Methodspara verbos não simples) que correspondam ao verbo não simples e / ou cabeçalhos não simples, o navegador enviará a solicitação real.

Supondo que o Site A queira enviar uma solicitação PUT para /somePage, com um Content-Typevalor não simples de application/json, o navegador enviaria primeiro uma solicitação de comprovação:

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

Observe que Access-Control-Request-Methode Access-Control-Request-Headerssão adicionados pelo navegador automaticamente; você não precisa adicioná-los. Este comprovante de OPÇÕES obtém os cabeçalhos de resposta bem-sucedidos:

Access-Control-Allow-Origin: http://siteA.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

Ao enviar a solicitação real (após a conclusão da comprovação), o comportamento é idêntico ao modo como uma solicitação simples é tratada. Em outras palavras, uma solicitação não simples cuja comprovação é bem-sucedida é tratada da mesma forma que uma solicitação simples (ou seja, o servidor ainda deve enviar Access-Control-Allow-Originnovamente para a resposta real).

Os navegadores enviam a solicitação real:

PUT /somePage HTTP/1.1
Origin: http://siteA.com
Content-Type: application/json

{ "myRequestContent": "JSON is so great" }

E o servidor envia de volta um Access-Control-Allow-Origin, como faria para uma solicitação simples:

Access-Control-Allow-Origin: http://siteA.com

Consulte Noções básicas sobre XMLHttpRequest sobre CORS para obter mais informações sobre solicitações não simples.

Compartilhamento de recursos de origem cruzada - CORS(solicitação AJAX entre domínios da AKA) é um problema que a maioria dos desenvolvedores da Web pode encontrar, de acordo com a mesma política de origem, navegadores restringem o JavaScript do cliente em uma caixa de proteção de segurança, geralmente o JS não pode se comunicar diretamente com um servidor remoto de um domínio diferente. No passado, os desenvolvedores criavam várias maneiras complicadas de obter solicitações de recursos entre domínios, e as formas mais comuns de uso são:

1. Use o Flash / Silverlight ou o servidor como um "proxy" para se comunicar com o controle remoto.
2. JSON com preenchimento ( JSONP ).
3. Incorpora um servidor remoto em um iframe e comunique-se através de fragmento ou window.name, consulte aqui .

Essas maneiras complicadas têm mais ou menos alguns problemas, por exemplo, o JSONP pode resultar em brechas na segurança se os desenvolvedores simplesmente a "avaliarem" e o item 3 acima, embora funcione, ambos os domínios devem criar um contrato estrito entre si, nem flexível nem elegante NA MINHA HUMILDE OPINIÃO:)

O W3C havia introduzido o CORS (Cross-Origin Resource Sharing) como uma solução padrão para fornecer uma maneira segura, flexível e recomendada de resolver esse problema.

O mecanismo

De alto nível, podemos simplesmente considerar que o CORS é um contrato entre a chamada AJAX do cliente do domínio A e uma página hospedada no domínio B, uma solicitação / resposta típica de origem cruzada seria:

DomainA cabeçalhos de solicitação AJAX

Host DomainB.com
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0) Gecko/20100101 Firefox/4.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8,application/json
Accept-Language en-us;
Accept-Encoding gzip, deflate
Keep-Alive 115
Origin http://DomainA.com 

Cabeçalhos de resposta do domínio B

Cache-Control private
Content-Type application/json; charset=utf-8
Access-Control-Allow-Origin DomainA.com
Content-Length 87
Proxy-Connection Keep-Alive
Connection Keep-Alive

As partes azuis marcadas acima foram os fatos principais: "Cabeçalho de solicitação" Origem "indica de onde a solicitação de origem cruzada ou solicitação de comprovação se origina", o cabeçalho de resposta "Acesso-controle-Permitir-origem" indica que esta página permite solicitações remotas de DomínioA (se o valor for *, indica que permite solicitações remotas de qualquer domínio).

Como mencionei acima, o W3 recomendou que o navegador implementasse uma " solicitação de comprovação " antes de enviar a solicitação HTTP de origem cruzada, em poucas palavras, é uma OPTIONSsolicitação HTTP :

OPTIONS DomainB.com/foo.aspx HTTP/1.1

Se foo.aspx suportar o verbo HTTP OPTIONS, poderá retornar a resposta como abaixo:

HTTP/1.1 200 OK
Date: Wed, 01 Mar 2011 15:38:19 GMT
Access-Control-Allow-Origin: http://DomainA.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, HEAD
Access-Control-Allow-Headers: X-Requested-With
Access-Control-Max-Age: 1728000
Connection: Keep-Alive
Content-Type: application/json

Somente se a resposta contiver "Access-Control-Allow-Origin" E seu valor for "*" ou contiver o domínio que enviou a solicitação CORS, satisfazendo esta condição obrigatória, o navegador enviará a solicitação real entre domínios e armazenará em cache o resultado em " Cache de resultados de comprovação ".

Eu escrevi sobre o CORS há três anos: Solicitação HTTP de origem cruzada AJAX

A pergunta é um pouco antiga para ser respondida, mas estou postando isso para qualquer referência futura a essa pergunta.

De acordo com este artigo da Mozilla Developer Network,

Um recurso faz uma solicitação HTTP de origem cruzada quando solicita um recurso de um domínio ou porta diferente daquele ao qual o primeiro recurso atende.

Uma página HTML servido das http://domain-a.comfaz uma <img>solicitação de src para http://domain-b.com/image.jpg.
Atualmente, muitas páginas da Web carregam recursos como folhas de estilo CSS , imagens e scripts de domínios separados (portanto, deve ser legal).

Política de Mesma Origem

Por motivos de segurança, os navegadores restringem solicitações HTTP de origem cruzada iniciadas a partir de scripts .
Por exemplo, XMLHttpRequeste Fetchsiga a política de mesma origem .
Portanto, um aplicativo da Web que usa XMLHttpRequestou Fetchsó pode fazer solicitações HTTP para seu próprio domínio .

Compartilhamento de recursos entre origens (CORS)

Para melhorar os aplicativos da web, os desenvolvedores pediram aos fornecedores de navegadores que permitissem solicitações entre domínios.

O mecanismo de compartilhamento de recursos de origem cruzada (CORS) fornece aos servidores da Web controles de acesso entre domínios , que permitem transferências seguras de dados entre domínios.
Navegadores modernos usam CORS em um contêiner de API - como XMLHttpRequestou Fetch- para atenuar os riscos de solicitações HTTP de origem cruzada.

Como o CORS funciona ( Access-Control-Allow-Origincabeçalho)

Wikipedia :

O padrão CORS descreve novos cabeçalhos HTTP que fornecem aos navegadores e servidores uma maneira de solicitar URLs remotas somente quando eles têm permissão.

Embora algumas validações e autorizações possam ser executadas pelo servidor, geralmente é responsabilidade do navegador oferecer suporte a esses cabeçalhos e respeitar as restrições que eles impõem.

Exemplo

1. O navegador envia a OPTIONSsolicitação com um Origin HTTPcabeçalho.

   O valor desse cabeçalho é o domínio que serviu a página pai. Quando uma página http://www.example.comtenta acessar os dados de um usuário service.example.com, o seguinte cabeçalho da solicitação é enviado para service.example.com:

   Origem: http://www.example.com

2. O servidor em service.example.compode responder com:

   • Um Access-Control-Allow-Origincabeçalho (ACAO) em sua resposta indicando quais sites de origem são permitidos.
     Por exemplo:

     Access-Control-Allow-Origin: http://www.example.com

   • Uma página de erro se o servidor não permitir a solicitação de origem cruzada

   • Um Access-Control-Allow-Origincabeçalho (ACAO) com um curinga que permite todos os domínios:

     Access-Control-Allow-Origin: *

Sempre que começo a pensar no CORS, minha intuição sobre o site que hospeda os cabeçalhos está incorreta, assim como você descreveu na sua pergunta. Para mim, ajuda pensar sobre o objetivo da mesma política de origem.

O objetivo da mesma política de origem é protegê-lo contra JavaScript malicioso no siteA.com, acessando informações privadas que você escolheu compartilhar apenas com o siteB.com. Sem a mesma política de origem, o JavaScript escrito pelos autores do siteA.com pode fazer com que seu navegador faça solicitações ao siteB.com, usando os cookies de autenticação do siteB.com. Dessa forma, o siteA.com pode roubar as informações secretas que você compartilha com o siteB.com.

Às vezes, você precisa trabalhar entre domínios, que é onde o CORS entra. O CORS relaxa a mesma política de origem para domainB.com, usando o Access-Control-Allow-Origincabeçalho para listar outros domínios (domainA.com) confiáveis ​​para executar JavaScript que podem interagir com o domainA. com.

Para entender qual domínio deve servir os cabeçalhos do CORS, considere isso. Você visita o malware.com, que contém algum JavaScript que tenta fazer uma solicitação entre domínios para o mybank.com. Cabe ao mybank.com, não malicioso.com, decidir se define ou não os cabeçalhos CORS que relaxam a mesma política de origem, permitindo que o JavaScript do malicioso.com interaja com ele. Se malicous.com pudesse definir seus próprios cabeçalhos CORS permitindo seu próprio acesso JavaScript ao mybank.com, isso anularia completamente a mesma política de origem.

Penso que o motivo da minha má intuição é o ponto de vista que tenho ao desenvolver um site. É o meu site, com todo o meu JavaScript, portanto, não está fazendo nada de malicioso e cabe a mim especificar com quais outros sites o meu JavaScript pode interagir. Quando, na verdade, eu deveria estar pensando em quais outros sites o JavaScript está tentando interagir com o meu site e devo usar o CORS para permitir isso?

1. Um cliente baixa o código javascript MyCode.js de http: // siteA - a origem.

O código que faz o download - sua tag de script html ou xhr do javascript ou qualquer outra coisa - veio, digamos, http: // siteZ . E, quando o navegador solicita o MyCode.js, ele envia um cabeçalho Origin: dizendo "Origin: http: // siteZ ", porque pode ver que você está solicitando o siteA e o siteZ! = SiteA. (Você não pode parar ou interferir nisso.)

2. O cabeçalho de resposta do MyCode.js contém Access-Control-Allow-Origin: http: // siteB , que eu pensei que significava que o MyCode.js tinha permissão para fazer referências de origem cruzada ao site B.

não. Isso significa que apenas o siteB tem permissão para fazer essa solicitação. Portanto, sua solicitação para MyCode.js do siteZ recebe um erro e o navegador normalmente não fornece nada. Mas se você fizer seu servidor retornar o ACAO: siteZ, você receberá o MyCode.js. Ou se ele enviar '*', isso funcionará, permitirá que todos entrem. Ou se o servidor sempre envia a string do cabeçalho Origin: ... mas ... por segurança, se você tem medo de hackers , seu servidor deve permitir apenas origens em uma lista restrita que possa fazer essas solicitações.

Em seguida, MyCode.js vem do siteA. Quando faz solicitações ao siteB, todas são de origem cruzada, o navegador envia Origem: siteA e o siteB precisa acessar o siteA, reconhecê-lo na pequena lista de solicitantes permitidos e enviar de volta o ACAO: siteA. Somente então o navegador permitirá que seu script obtenha o resultado dessas solicitações.

Usando React e Axios , junte o link do proxy ao URL e adicione o cabeçalho, como mostrado abaixo

https://cors-anywhere.herokuapp.com/ + Your API URL

Apenas adicionando o link Proxy funcionará, mas também poderá gerar erro para No Access novamente. Por isso, é melhor adicionar cabeçalho, como mostrado abaixo.

axios.get(`https://cors-anywhere.herokuapp.com/[YOUR_API_URL]`,{headers: {'Access-Control-Allow-Origin': '*'}})
      .then(response => console.log(response:data);
  }

AVISO: Não deve ser usado na produção

Esta é apenas uma solução rápida. Se você está enfrentando dificuldades para obter uma resposta, PODE usá-la. Mas, novamente, não é a melhor resposta para a produção.

Recebi vários votos negativos e faz completamente sentido, eu deveria ter adicionado o aviso há muito tempo.

Se você deseja apenas testar um aplicativo entre domínios no qual o navegador bloqueia sua solicitação, basta abrir o navegador no modo não seguro e testá-lo sem alterar seu código e sem torná-lo inseguro. No MAC OS, você pode fazer isso a partir da linha do terminal:

open -a Google\ Chrome --args --disable-web-security --user-data-dir

Se você estiver usando PHP, tente adicionar o seguinte código no início do arquivo php:

Se você estiver usando o host local, tente o seguinte:

header("Access-Control-Allow-Origin: *");

Se você estiver usando domínios externos, como servidor, tente o seguinte:

header("Access-Control-Allow-Origin: http://www.website.com");

Eu trabalho com express 4 e nó 7.4 e angular, tive o mesmo problema me ajudar isso:
a) lado do servidor: no arquivo app.js dou cabeçalhos para todas as respostas como:

app.use(function(req, res, next) {  
      res.header('Access-Control-Allow-Origin', req.headers.origin);
      res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
      next();
 });  

isso deve ter antes de todo roteador .
Eu vi muitos cabeçalhos adicionados:

res.header("Access-Control-Allow-Headers","*");
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');

mas eu não preciso disso,
b) lado do cliente: no send ajax, você precisa adicionar: "withCredentials: true", como:

$http({
     method: 'POST',
     url: 'url, 
     withCredentials: true,
     data : {}
   }).then(function(response){
        // code  
   }, function (response) {
         // code 
   });

boa sorte.

Para compartilhamento de origem cruzada, defina o cabeçalho: 'Access-Control-Allow-Origin':'*';

Php: header('Access-Control-Allow-Origin':'*');

Nó: app.use('Access-Control-Allow-Origin':'*');

Isso permitirá compartilhar conteúdo para diferentes domínios.

No Python, tenho usado a Flask-CORSbiblioteca com grande sucesso. Faz lidar com CORS super fácil e indolor. Eu adicionei algum código da documentação da biblioteca abaixo.

Instalando:

$ pip install -U flask-cors

Exemplo simples que permite o CORS para todos os domínios em todas as rotas:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Para exemplos mais específicos, consulte a documentação. Usei o exemplo simples acima para solucionar o problema do CORS em um aplicativo iônico que estou construindo que precisa acessar um servidor de balão separado.

Pela minha própria experiência, é difícil encontrar uma explicação simples para o fato de o CORS ser uma preocupação.

Depois de entender por que está lá, os cabeçalhos e a discussão ficam muito mais claros. Vou tentar em algumas linhas.

É tudo sobre cookies. Os cookies são armazenados em um cliente por seu domínio.

Um exemplo de história: no seu computador, existe um cookie para yourbank.com. Talvez sua sessão esteja lá.

Ponto principal: quando um cliente faz uma solicitação ao servidor, ele envia os cookies armazenados no domínio em que o cliente está.

Você está logado no seu navegador em yourbank.com. Você solicita ver todas as suas contas. yourbank.comrecebe a pilha de cookies e envia de volta sua resposta (suas contas).

Se outro cliente fizer uma solicitação de origem cruzada para um servidor, esses cookies serão enviados, exatamente como antes. Ruh roh.

Você navega para malicious.com. O malicioso faz várias solicitações para diferentes bancos, inclusive yourbank.com.

Como os cookies são validados conforme o esperado, o servidor autorizará a resposta.

Esses cookies são coletados e enviados - e agora, eles malicious.comtêm uma resposta yourbank.

Caramba.

Então, agora, algumas perguntas e respostas se tornam aparentes:

• "Por que não impedimos o navegador de fazer isso?" Sim. CORS.
• "Como contornamos isso?" Peça ao servidor que informe a solicitação que o CORS está OK.

Basta colar o seguinte código no seu arquivo web.config.

Observou que, você deve colar o seguinte código na <system.webServer>tag

    <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>  

O cabeçalho de resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada.

Header type Response       header
Forbidden header name      no

Uma resposta que diz ao navegador para permitir que o código de qualquer origem acesse um recurso incluirá o seguinte:

Access-Control-Allow-Origin: *

Para mais informações, visite aqui ....

Nginx e Appache

Além das respostas dos apsillers, eu gostaria de adicionar um gráfico wiki que mostra quando a solicitação é simples ou não (e a solicitação pré-vôo do OPTIONS é enviada ou não)

Para uma solicitação simples (por exemplo, imagens com hotlink ), você não precisa alterar os arquivos de configuração do servidor, mas pode adicionar cabeçalhos no aplicativo (hospedado no servidor, por exemplo, em php), como Melvin Guerrero menciona em sua resposta - mas lembre -se: se você adicionar cabeçalhos cors no seu servidor (config) e ao mesmo tempo você permitir cors simples no aplicativo (por exemplo, php), isso não funcionará.

E aqui estão as configurações para dois servidores populares

• ativar o CORS no Nginx ( nginx.confarquivo)

  Mostrar snippet de código

  location ~ ^/index\.php(/|$) {
     ...
      add_header 'Access-Control-Allow-Origin' "$http_origin" always; # if you change "$http_origin" to "*" you shoud get same result - allow all domain to CORS (but better change it to your particular domain)
      add_header 'Access-Control-Allow-Credentials' 'true' always;
      if ($request_method = OPTIONS) {
          add_header 'Access-Control-Allow-Origin' "$http_origin"; # DO NOT remove THIS LINES (doubled with outside 'if' above)
          add_header 'Access-Control-Allow-Credentials' 'true';
          add_header 'Access-Control-Max-Age' 1728000; # cache preflight value for 20 days
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # arbitrary methods
          add_header 'Access-Control-Allow-Headers' 'My-First-Header,My-Second-Header,Authorization,Content-Type,Accept,Origin'; # arbitrary headers
          add_header 'Content-Length' 0;
          add_header 'Content-Type' 'text/plain charset=UTF-8';
          return 204;
      }
  }

  Executar snippet de códigoOcultar resultados

  Expandir snippet

• ativar o CORS no Appache ( .htaccessarquivo)

  Mostrar snippet de código

  # ------------------------------------------------------------------------------
  # | Cross-domain Ajax requests                                                 |
  # ------------------------------------------------------------------------------
  
  # Enable cross-origin Ajax requests.
  # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity
  # http://enable-cors.org/
  
  # change * (allow any domain) below to your domain
  Header set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
  Header always set Access-Control-Allow-Headers "My-First-Header,My-Second-Header,Authorization, content-type, csrf-token"
  Header always set Access-Control-Allow-Credentials "true"

  Executar snippet de códigoOcultar resultados

  Expandir snippet