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

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?

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.

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.

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.

Encontrei a solução após 2 dias :(.

Observação importante: ao responder a uma solicitação credenciada, o servidor deve especificar um domínio e não pode usar curinga.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials

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

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!

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.

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.

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]

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.

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).

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

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.

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.

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.