Firefox 'Cross-Origin Request Blocked' apesar dos cabeçalhos


119

Estou tentando fazer uma solicitação simples de origem cruzada e o Firefox a está bloqueando de forma consistente com este erro:

Solicitação de origem cruzada bloqueada: A política da mesma origem não permite a leitura do recurso remoto em [url]. Isso pode ser corrigido movendo o recurso para o mesmo domínio ou habilitando o CORS. [url]

Funciona bem no Chrome e Safari.

Pelo que eu posso dizer, configurei todos os cabeçalhos corretos no meu PHP para permitir que isso funcione. Aqui está o que meu servidor está respondendo

HTTP/1.1 200 OK
Date: Mon, 23 Jun 2014 17:15:20 GMT
Server: Apache/2.2.22 (Debian)
X-Powered-By: PHP/5.4.4-14+deb7u8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Request-Headers: X-Requested-With, accept, content-type
Vary: Accept-Encoding
Content-Length: 186
Content-Type: text/html

Tentei usar Angular, jQuery e um objeto XMLHTTPRequest básico, assim:

var data = "id=1234"
var request = new XMLHttpRequest({mozSystem: true})
request.onload = onSuccess;
request.open('GET', 'https://myurl.com' + '?' + data, true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
request.send()

... e funciona em todos os navegadores, exceto no Firefox. Alguém pode ajudar com isso?


Você pode fornecer um rastreamento completo de todas as solicitações e respostas? Ou fornecer pelo menos um site de teste? Se o site está acessando o arquivo http, https, de origem remota? mozSystemnão é compatível com sites regulares, apenas aplicativos firefox-os empacotados , então, abandone essa opção.
nmaier

1
@nmaier Headers ao enviar como POST em vez de GET: Accept application/json, text/plain, */* Accept-Encoding gzip, deflate Accept-Language en-US,en;q=0.5 Content-Length 35 Content-Type application/x-www-form-urlencoded; charset=UTF-8 Host [url] Origin [url] Referer [referrer url] User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0 Error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [url]. This can be fixed by moving the resource to the same domain or enabling CORS. [url]
Godwhacker

2
@nmaier Na verdade, parece que é algum tipo de problema com o certificado de segurança do site que estou acessando - o Firefox está apenas dando um erro espúrio. Se eu adicionar o site à lista de exceções, ele funcionará bem.
Godwhacker

Respostas:


121

Acontece que isso não tem nada a ver com CORS - era um problema com o certificado de segurança. Erros enganosos = 4 horas de dores de cabeça.


3
Só tive esse problema exato, o erro é muito genérico e além disso o Chrome e o Firefox usam diferentes armazenamentos de certificados, então é mais difícil de depurar. Eu deveria ter suspeitado disso quando meu proxy não capturou nenhuma solicitação OPTIONS (ele estava interrompendo no handshake SSL).
Daniel Correia

4
Godwhacker, eu estou no mesmo problema, talvez. Como você descobriu que era o certificado de segurança? Onde você pode ver isso?
Leo

9
No meu caso, eu tinha um aplicativo angular que fazia chamadas para outro servidor, ambos usando certificados assinados internamente. No entanto, o Firefox não confia automaticamente no certificado porque ele não é reconhecido por uma autoridade pública. Portanto, eu precisava ter certeza de que os certificados para ambos os servidores foram adicionados como exceções no Firefox antes que esse problema fosse embora.
Sam Storie

3
Para mim, a correção foi definir withCredentials=truena instância XHR; caso contrário, o Firefox falhou ao usar o certificado do cliente ao fazer a solicitação (funcionou bem no Chrome, no entanto).
Clint Harris

1
O comentário de @SamStorie parece mais uma resposta do que essa resposta. Obrigado
Naga de

26

Descobri que meu problema era que o servidor para o qual enviei a solicitação cruzada tinha um certificado que não era confiável.

Se você deseja se conectar a um domínio cruzado com https, primeiro deve adicionar uma exceção para este certificado.

Você pode fazer isso visitando o link bloqueado uma vez e adicionando a exceção.


5
Isso não ajuda ninguém que visita o seu site, a menos que você esteja feliz em colocar uma mensagem lá dizendo 'Se você estiver usando o Firefox, por favor, vá a este site e adicione-o à sua lista de exceções'
Godwhacker

@ Cracker0dks "visite o link bloqueado uma vez e adicione a exceção", você poderia explicar onde adicionar a exceção? Estou usando o Firefox Quantum. TIA
Paul de

1
você acessa o link do qual o firefox está reclamando terrivelmente. Então você recebe o aviso de certificado. Permita o certificado. Visite seu site principal novamente.
Cracker0dks

26

Eu me deparei com esta pergunta porque descobri que solicitações no Firefox estavam sendo bloqueadas com a mensagem:

Motivo: a solicitação CORS não foi bem-sucedida

Depois de arrancar meus cabelos, descobri que uma extensão recém-instalada do Firefox, Privacy Badger, estava bloqueando as solicitações.

Se você chegar a esta pergunta depois de coçar a cabeça, tente verificar quais extensões você instalou para ver se alguma delas está bloqueando solicitações.

Consulte Motivo: a solicitação CORS não foi bem - sucedida no MDN para obter detalhes.


como você descobriu qual extensão está bloqueando as solicitações? Estou tendo o mesmo problema, pois a solicitação foi bem-sucedida em um Firefox com um novo perfil (portanto, sem extensões)
Ciprian Tomoiagă

1
Cliquei em cada extensão para ver se havia alguma menção de bloqueio de conteúdo para o site específico com o qual estava tendo problemas. O Ghostery tinha uma entrada, então marquei o site como confiável, recarreguei a página e as solicitações foram bem-sucedidas.
Professor de programação

1
Obrigado! Também descobri a extensão Project Insight, que oferece uma visão geral de todas as permissões de extensões. addons.mozilla.org/en-US/firefox/addon/project-insight
Ciprian Tomoiagă

1
@awendt Oof. Texugo de privacidade para mim também. Obrigado.
Jason Leach


12

Se você não tiver um certificado 'real' (e, portanto, usando um autoassinado), no FireFox você pode ir para:

Options > Privacy & Security > (scroll to the bottom) View Certificates > Add Exception.

Lá, preencha a localização, por exemplo: https: //wwww.myserver: myport


isso funcionou para mim quando meu CORS funciona em todos os outros navegadores, exceto Firefox com o erro -> Solicitação de origem cruzada bloqueada: a política da mesma origem não permite a leitura do recurso remoto em localhost: 44304 / v1 / search . (Motivo: a solicitação CORS não foi bem-sucedida).
JGilmartin

5

Apenas uma palavra de advertência. Finalmente resolvi o problema com o Firefox e o CORS.

A solução para mim foi este post

Configurando CORS (compartilhamento de recursos de origem cruzada) no Apache com cabeçalhos de resposta corretos permitindo tudo | Benjamin Horn

No entanto, o Firefox estava se comportando muito, muito estranho depois de definir esses cabeçalhos no servidor Apache (na pasta .htaccess).

Eu adicionei um monte de console.log("Hi FF, you are here A")etc para ver o que estava acontecendo.

No início, parecia que estava pendurado xhr.send(). Mas então descobri que não chegava a esta declaração. Coloquei outro console.loglogo antes dele e não cheguei lá - embora não houvesse nada entre o último console.loge o novo. Apenas parou entre dois console.log.

Reordenando linhas, excluindo, para ver se havia algum caractere estranho no arquivo. Não encontrei nada.

Reiniciar o Firefox corrigiu o problema.

Sim, devo registrar um bug. É que é tão estranho que não sei como reproduzi-lo.

AVISO : E, oh, eu apenas fiz as Header always setpartes, não as Rewrite*partes!


A mesma história para mim hoje, essencialmente. Reiniciar o Firefox corrigiu isso. Mais de 5 anos depois.
Søren Mortensen,

3

Basta adicionar

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

ao .htaccessarquivo na raiz do site com o qual você está tentando se conectar.


Isso é bom se você deseja configurá-lo para aceitar solicitações de qualquer lugar; não está bem se você não fizer isso, que é o ponto inteiro do cabeçalho.
Godwhacker

2

Para a posteridade, verifique também os logs do servidor para ver se o recurso solicitado está retornando 200.

Eu tive um problema semelhante, em que todos os cabeçalhos adequados estavam sendo retornados na solicitação pré-voo ajax, mas o navegador relatou que a solicitação real foi bloqueada devido a cabeçalhos CORS inválidos.

Acontece que a página solicitada estava retornando um erro 500 devido a um código incorreto, mas apenas quando foi buscada via CORS. O navegador (Chrome e Firefox) relatou erroneamente que o cabeçalho Access-Control-Allow-Origin estava faltando em vez de dizer que a página retornou 500.


1

Tente isso, deve resolver o seu problema

  1. Em seu config.php, adicione www pre em seu domínio.com. Por exemplo:

    HTTP define('HTTP_SERVER', 'http://domain name with www/');
    HTTPS define('HTTPS_SERVER', 'http://domain name with www/');
  2. Adicione isso ao seu arquivo .htaccess

    RewriteCond %{REQUEST_METHOD} OPTIONS RewriteRule ^(.*)$ $1 [R=200,L]

1

Para mim, descobri que eu estava definindo o Access-Control-Allow-Origincabeçalho da resposta como um específico (e correto), host.commas tinha que ser retornado como http://host.com. O que o Firefox faz? Ele silenciosamente engole a solicitação GET e retorna um status 0 para o XHR, sem saída de avisos para o console javascript, enquanto para outras falhas semelhantes, pelo menos diria algo. Ai ai.


1
Parece que o esquema é esperado, olhando os exemplos em w3.org/TR/cors, mas de qualquer forma obrigado, eu estava fazendo a coisa errada também e sim, a mensagem de erro do Firefox está faltando.
Richard Green

1

Para depurar, verifique os logs do servidor, se possível. O Firefox retorna erros CORS no console por uma série de razões.

Uma das razões é também o plugin uMatrix (e eu acho que NoScript e similares também).


0

Enfrentei problema semelhante, e acho que é válido registrar como resolvi:

Eu tenho um sistema construído basicamente sobre Symfony 3. Para fins de autoaprendizagem e desempenho, decidi escrever alguns scripts usando GoLang, também, uma API com acesso público.

A API My Go espera parâmetros de formato Json e também retorna uma resposta de formato Json

Para chamar aqueles GoApi's que estou usando, na maioria, $ .ajax (jQuery) O primeiro teste foi um engano: o (des) famoso "Cross-Origin Request Blocked" apareceu! Então, tentei definir o "Access-Control-Allow-Origin: *" no apache conf, htaccess, php, javascript e em qualquer lugar que eu pudesse encontrar no google!

Mas, mesmo, mesmo erro frustrante !!!

A solução foi simples: tive que fazer solicitações de "POST" em vez de "GET".

Para conseguir isso, tive que ajustar GoLang e JavaScript para usar GET! Uma vez feito isso, não há mais solicitações de origem cruzada bloqueadas para mim !!!

Espero que ajude

PS:

Estou usando apache e Vhost, no bloco de diretório que tenho

  Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Lembre-se: "*" significa que você aceitará solicitações de qualquer pessoa !!! (O que pode ser uma falta de segurança) No meu caso está tudo bem, porque será uma API pública

PS2: Meus cabeçalhos

Cabeçalhos de resposta

Access-Control-Allow-Credentials    true
Access-Control-Allow-Headers    Authorization
Access-Control-Allow-Methods    GET, POST, PUT
Access-Control-Allow-Origin http://localhost
Content-Length  164
Content-Type    application/json; charset=UTF-8
Date    Tue, 07 May 2019 20:33:52 GMT

Solicitar cabeçalhos (469 B)

Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Content-Length  81
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Host    localhost:9003
Origin  http://localhost
Referer http://localhost/fibootkt/MY_app_dev.php/MyTest/GoAPI
User-Agent  Mozilla/5.0 (Macintosh; Intel …) Gecko/20100101 Firefox/66.0

0

Se as respostas acima mencionadas não ajudarem, verifique se o servidor de back-end está funcionando ou não, pois no meu caso o servidor travou e esse erro acabou sendo totalmente enganoso.


0

No meu caso foi meu ADBLOCKER ! Por algum motivo, ele foi habilitado no meu host local e causando este erro no Firefox.

Desativá- lo ou desinstalar o plug - in deve corrigir isso.

No seu caso, pode não ser um adblocker, mas outro plugin do Firefox. Teste-o no modo anônimo primeiro, sem plug-ins para determinar se esse é o problema e, em seguida, desative os plug-ins sistematicamente até encontrar o culpado.


-3

Os arquivos são autoexplicativos. Faça um arquivo, chame-o de qualquer coisa. No meu caso, jq2.php.

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    // document is made ready so that the program starts when we load this page       
    $(document).ready(function(){

        // it tells that any key activity in the "subcat_search" filed will execute the query.
        $("#subcat_search").keyup(function(){

            // we assemble the get link for the direction to our engine "gs.php". 
            var link1 = "http://127.0.0.1/jqm/gs.php?needle=" + $("#subcat_search").val();

            $.ajax({
                url: link1,
                // ajax function is called sending the input string to "gs.php".
                success: function(result){
                    // result is stuffed in the label.
                    $("#search_val").html(result);
                }
            });
        })   

    });
</script>
</head>

<body>

<!-- the input field for search string -->
<input type="text" id="subcat_search">
<br>
<!-- the output field for stuffing the output. -->
<label id="search_val"></label>

</body>
</html>

Agora vamos incluir um motor, criar um arquivo, chamá-lo do que quiser. No meu caso, é gs.php.

$head = "https://maps.googleapis.com/maps/api/place/textsearch/json?query="; //our head
$key = "your key here"; //your key
$hay = $_GET['needle'];

$hay = str_replace(" ", "+", $hay); //replacing the " " with "+" to design it as per the google's requirement 
$kill = $head . $hay . "&key=" . $key; //assembling the string in proper way . 
print file_get_contents($kill);

Tentei manter o exemplo o mais simples possível. E como ele executa o link a cada pressionamento de tecla, a cota de sua API será consumida muito rapidamente.

Claro que não há limites para as coisas que podemos fazer, como colocar os dados em uma tabela, enviar para o banco de dados e assim por diante.


Por favor, não poste a mesma resposta mais de uma vez. E certifique-se de que sua resposta realmente responde à pergunta. Se você precisar direcionar alguém a outro lugar para obter mais informações, não é uma boa resposta.
elixenida

Olá Usei o link pois contém mais algumas informações como pré-requisitos etc. Se você achar que é apropriado, vou removê-lo.
Harsh Mehta
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.