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/
