Corrigindo o erro ‘Access-Control-Allow-Origin’

Como corrigir o erro “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” nas suas requisições Ajax.

Provavelmente você está fazendo uma requisição Ajax a um domínio externo, diferente ao qual você está utilizando.

Nesta situação o que está “bloqueando” a sua comunicação com servidor externo é o navegador, por causa da “politica da mesma origem”.

Essa é uma politica presente no Cross-Origin Resource Sharing (CORS), que é uma especificação do W3C que permite a comunicação entre dominios por um navegador.

Possíveis soluções

Caso você tenha acesso ao recurso externo que você está tentando acessar, você pode fazer a seguinte configuração:

Para PHP:

<?php header('Access-Control-Allow-Origin: *'); ?>

Para .Htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Web.config (.net)

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

Observações: As configurações acimas devem ser utilizadas com cautela, pois podem abrir uma brecha para ataques em seu site.

Para cada tipo de servidor é possível fazer a mesma configuração acima, porém restringindo a um determinado conteúdo ou domínio de origem da requisição.

Chrome

Você pode até desabilitar essa regra no Chrome, criando um atalha com as seguintes diretrizes:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Jsonp

Você também pode utilizar do tipo de dado, jsonp.

Exemplo:

$.ajax({
  type: "GET",
  dataType: 'jsonp',
....

“JSON with padding” é um formato alternativo do JSON. Ele permite que seja realizada requisições de dados entre domínios diferentes.

Observação: jsonp não irá funcionar com requisições do tipo POST.

Conclusão “Access-Control-Allow-Origin”

Além das soluções acima, existem outras que irão se aplicar nos mais diversos cenários possíveis,

Faça um comentário com sua dúvida, detalhando o contexto de sua requisição para que eu possa te ajudar,

Bom desenvolvimento, 🙂

Conheça mais sobre CORS em: https://www.w3.org/TR/cors/