Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, a origem '…' não é permitida

Estou usando .htaccess para reescrever URLs e usei a tag base html para fazê-lo funcionar.

Agora, quando tento fazer uma solicitação ajax, recebo o seguinte erro:

XMLHttpRequest não pode carregar http://www.example.com/login.php. Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. http://example.comPortanto, a origem ' ' não é permitida.

Use addHeaderEm vez de usar o setHeadermétodo,

response.addHeader("Access-Control-Allow-Origin", "*");

*na linha acima permitirá access to all domains.

Por permitir access to specific domain only:

response.addHeader("Access-Control-Allow-Origin", "http://www.example.com");

Verifique isso blog post.

Por que o erro foi gerado:

O código JavaScript é limitado pela política de mesma origem , ou seja, a partir de uma página em www.example.com, você só pode fazer solicitações (AJAX) para serviços localizados exatamente no mesmo domínio, nesse caso, exatamente www.example.com( não example.com - sem o www- ou whatever.example.com).

No seu caso, seu código Ajax está tentando acessar um serviço a http://wordicious.compartir de uma página localizada em http://www.wordicious.com.

Embora muito parecidos, eles não são do mesmo domínio. E quando eles não estiverem no mesmo domínio, a solicitação só será bem-sucedida se a resolução do destino contiver um Access-Control-Allow-Origincabeçalho.

Como sua página / serviço em http://wordicious.comnunca foi configurada para apresentar esse cabeçalho, essa mensagem de erro é mostrada.

Solução:

Como dito, os domínios de origem (onde a página com JavaScript está) e o destino (onde o JavaScript está tentando alcançar) devem ser exatamente os mesmos.

Seu caso parece um erro de digitação. Parece http://wordicious.come http://www.wordicious.comé realmente o mesmo servidor / domínio. Portanto, para corrigir, digite o destino e a origem igualmente: faça com que você solicite páginas / serviços de código Ajax para http://www.wordicious.comnãohttp://wordicious.com . (Talvez coloque o URL de destino relativamente, tipo '/login.php', sem o domínio).

Em uma nota mais geral:

Se o problema não for um erro de digitação, como parece ser o desta pergunta, a solução seria adicionar o Access-Control-Allow-Origindomínio de destino . Para adicioná-lo, depende, é claro, do servidor / idioma por trás desse endereço. Às vezes, uma variável de configuração na ferramenta faz o truque. Outras vezes, você precisará adicionar os cabeçalhos através do código.

Para o servidor .NET, você pode configurar isso em web.config, como mostrado abaixo

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>

Por exemplo, digamos que, se o domínio do servidor for http://live.makemypublication.com e o cliente for http://www.makemypublication.com , configure no web.config do servidor como abaixo

 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 </system.webServer>

Se você receber esta mensagem de erro do navegador:

Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Portanto, a origem '…' não é permitida

quando você estiver tentando fazer uma solicitação Ajax POST / GET para um servidor remoto que esteja fora de seu controle, esqueça esta simples correção:

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

O que você realmente precisa fazer, especialmente se você usa JavaScript apenas para fazer a solicitação do Ajax, é um proxy interno que pega sua consulta e a envia para o servidor remoto.

Primeiro no seu JavaScript, faça uma chamada do Ajax para o seu próprio servidor, algo como:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async:false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Em seguida, crie um arquivo PHP simples chamado proxy.php para agrupar seus dados do POST e anexá-los ao servidor de URL remoto como parâmetro. Dou um exemplo de como ignoro esse problema com a API de pesquisa do hotel Expedia:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Fazendo:

 echo json_encode(file_get_contents($url));

Você está apenas fazendo a mesma consulta, mas no lado do servidor e depois disso, deve funcionar bem.

Você precisa adicionar isso no início da sua página php "login.php"

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

você deve colocar as chaves / valores dos cabeçalhos na resposta do método de opções. por exemplo, se você tiver recurso em http://mydomain.com/myresource , no código do servidor você escreve

//response handler
void handleRequest(Request request, Response response) {
    if(request.method == "OPTIONS") {
       response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com")
       response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
       response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    }



}

Altere basicamente a resposta do cabeçalho da API adicionando os seguintes parâmetros adicionais.

Access-Control-Allow-Credentials: true

Controle de Acesso - Permitir Origem: *

Mas essa não é uma boa solução quando se trata de segurança

A solução alternativa é usar um proxy reverso em execução no host 'de origem' e encaminhar para o servidor de destino, como o Fiddler:

Link aqui: http://docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

Ou um proxy reverso do Apache ...

Adicione isso ao seu arquivo PHP ou controlador principal

header("Access-Control-Allow-Origin: http://localhost:9000");

Resolvido com a entrada abaixo no httpd.conf

#CORS Issue
Header set X-Content-Type-Options "nosniff"
Header always set Access-Control-Max-Age 1728000
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH"
Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control"
Header always set Access-Control-Allow-Credentials true

#CORS REWRITE
RewriteEngine On                  
RewriteCond %{REQUEST_METHOD} OPTIONS 
#RewriteRule ^(.*)$ $1 [R=200,L]
RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

Os candidatos encontram a Função usada em XMLHTTPREQUEST em Javascript para configurar os cabeçalhos da solicitação.

...

xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

Referência: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader