헤더에도 불구하고 Firefox 'Cross-Origin Request Blocked'

간단한 교차 출처 요청을 시도하고 있으며 Firefox는 다음 오류로 계속 차단합니다.

교차 출처 요청 차단됨 : 동일한 출처 정책이 [url]에서 원격 리소스 읽기를 허용하지 않습니다. 리소스를 동일한 도메인으로 이동하거나 CORS를 활성화하여이 문제를 해결할 수 있습니다. [URL]

Chrome 및 Safari에서 잘 작동합니다.

내가 알 수있는 한이 작동하도록 PHP에 올바른 헤더를 모두 설정했습니다. 내 서버가 응답하는 내용은 다음과 같습니다.

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

Angular, jQuery 및 기본 XMLHTTPRequest 객체를 다음과 같이 사용해 보았습니다.

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

... Firefox를 제외한 모든 브라우저에서 작동합니다. 누구든지 이것을 도울 수 있습니까?

이것은 CORS와 관련이없는 것으로 밝혀졌습니다. 보안 인증서에 문제가있었습니다. 잘못된 오류 = 4 시간의 골칫거리.

내 문제는 교차 요청을 보낸 서버에 신뢰할 수없는 인증서가 있다는 것입니다.

다음을 사용하여 교차 도메인에 연결하려는 경우 https 인증서에 대한 예외를 추가해야합니다.

차단 된 링크를 한 번 방문하고 예외를 추가하면됩니다.

Firefox에서 요청이 메시지로 차단되는 것을 발견 한이 질문을 발견했습니다.

이유 : CORS 요청이 성공하지 못했습니다.

머리카락을 뽑은 후 새로 설치된 Firefox 확장 프로그램 인 Privacy Badger가 요청을 차단하고 있다는 것을 알았습니다.

머리를 긁은 후이 질문이 나타나면 설치 한 확장 프로그램 중 어떤 확장 프로그램이 요청을 차단하는지 확인하십시오.

자세한 내용은 이유 : CORS 요청이 MDN에서 성공하지 못했습니다 를 참조하십시오.

2 일 후에 해결책을 찾았습니다.

중요 참고 사항 : 자격 증명 요청에 응답 할 때 서버는 도메인을 지정해야하며 와일드 카드를 사용할 수 없습니다.

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

'실제'인증서가없는 경우 (따라서 자체 서명 된 인증서를 사용하는 경우) FireFox에서 다음으로 이동할 수 있습니다.

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

여기에 위치를 입력하십시오. 예 : https : //wwww.myserver : myport

경고의 한마디. 마침내 Firefox 및 CORS 문제를 해결했습니다.

나를위한 해결책은이 포스트였습니다.

올바른 응답 헤더를 사용하여 Apache에서 CORS (교차 출처 리소스 공유) 설정 | 벤자민 혼

그러나 Firefox는 Apache 서버 (.htaccess 폴더)에 헤더를 설정 한 후 정말 이상하게 작동했습니다.

나는 console.log("Hi FF, you are here A")무슨 일이 일어나고 있는지 확인하기 위해 많은 등을 추가했습니다 .

처음에는 매달린 것처럼 보였습니다 xhr.send(). 그러나 나는 그것이이 진술에 도달하지 못했다는 것을 발견했습니다. 나는 console.log그것 바로 앞에 또 하나를 놓았고 거기에 도착하지 못했습니다. 비록 마지막 console.log것과 새로운 것 사이에 아무것도 없었음에도 불구하고 . 둘 사이에 멈췄어요 console.log.

줄 재정렬, 삭제, 파일에 이상한 문자가 있는지 확인합니다. 나는 아무것도 찾지 못했다.

Firefox를 다시 시작하면 문제가 해결되었습니다.

예, 버그를 신고해야합니다. 너무 이상해서 어떻게 재현해야할지 모르겠다.

주의 사항 : 그리고, 오, 나는 Header always set부분이 아니라 Rewrite*부분을했습니다!

그냥 추가

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

.htaccess연결하려는 웹 사이트의 루트에 있는 파일에.

사후의 경우 서버 로그를 확인하여 요청중인 리소스가 200을 반환하는지 확인합니다.

비행 전 ajax 요청에서 적절한 헤더가 모두 반환되는 비슷한 문제가 발생했지만 브라우저는 잘못된 CORS 헤더로 인해 실제 요청이 차단되었다고보고했습니다.

요청 된 페이지는 잘못된 코드로 인해 500 오류를 반환했지만 CORS를 통해 가져온 경우에만 발생했습니다. 브라우저 (Chrome 및 Firefox 모두)는 페이지가 500을 반환한다고 말하는 대신 Access-Control-Allow-Origin 헤더가 누락되었다고 잘못보고했습니다.

이것을 시도하면 문제가 해결됩니다.

1. config.php에서 domain.com에 www pre를 추가합니다. 예를 들면 :

   HTTP define('HTTP_SERVER', 'http://domain name with www/');
   HTTPS define('HTTPS_SERVER', 'http://domain name with www/');

2. 이것을 .htaccess 파일에 추가하십시오.

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

나를 위해 Access-Control-Allow-Origin응답 헤더를 특정 (및 올바른)으로 설정 host.com했지만 http://host.com대신 반환해야 했습니다. Firefox는 무엇을합니까? 조용히 GET 요청을 삼키고 javascript 콘솔에 경고 출력없이 상태 0을 XHR에 반환하는 반면, 다른 유사한 실패의 경우 적어도 무언가를 말할 것입니다. Ai ai.

디버그하려면 가능하면 서버 로그를 확인하십시오. Firefox는 다양한 이유로 콘솔에 CORS 오류를 반환합니다.

이유 중 하나는 uMatrix (그리고 NoScript와 비슷한 것 같아요) 플러그인도 있습니다.

비슷한 문제에 직면했고 어떻게 수정했는지 등록하는 것이 유효하다고 생각합니다.

저는 기본적으로 Symfony 3 위에 구축 된 시스템을 가지고 있습니다.자가 학습 및 성능 목적을 위해 GoLang과 공용 액세스가있는 API를 사용하여 스크립트를 거의 작성하지 않기로 결정했습니다.

My Go API는 Json 형식 매개 변수를 예상하고 Json 형식 응답도 반환합니다.

내가 사용하고있는 GoApi를 호출하기 위해 대부분 $ .ajax (jQuery) 첫 번째 테스트는 속임수였습니다. (un) 유명한 "Cross-Origin Request Blocked"팝업! 그런 다음 "Access-Control-Allow-Origin : *"을 apache conf, htaccess, php, javascript 및 Google에서 찾을 수있는 모든 곳에서 설정하려고했습니다!

하지만, 똑같은 실망스러운 오류 !!!

해결책은 간단했습니다. "GET"대신 "POST"요청을해야했습니다.

이를 위해 GoLang과 JavaScript를 모두 조정하여 GET! 완료되면 더 이상 Cross-Origin 요청이 차단되지 않습니다 !!!

도움이되기를 바랍니다.

추신:

나는 디렉토리 블록에서 아파치와 Vhost를 사용하고 있습니다.

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

기억하십시오 : "*"는 누구의 요청도 수락한다는 의미입니다 !!! (보안 부족 일 수 있음) 제 경우에는 공용 API이므로 괜찮습니다.

PS2 : 내 헤더

응답 헤더

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

요청 헤더 (469B)

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

앞서 언급 한 답변이 도움이되지 않으면 제 경우와 같이 백엔드 서버가 실행 중인지 여부를 확인하고이 오류는 완전히 오해의 소지가있는 것으로 밝혀졌습니다.

제 경우에는 ADBLOCKER였습니다. ! 어떤 이유로 내 로컬 호스트에서 활성화되어 Firefox 에서이 오류가 발생했습니다.

이를 비활성화 하거나 플러그인을 제거 하면 문제가 해결됩니다.

귀하의 경우에는 adblocker가 아니라 다른 Firefox 플러그인 일 수 있습니다. 플러그인없이 먼저 시크릿에서 테스트하여 문제인지 확인한 다음 범인을 찾을 때까지 플러그인을 체계적으로 비활성화합니다.

파일은 자명합니다. 파일을 만들고 무엇이든 부르십시오. 제 경우에는 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>

이제 우리는 엔진을 포함하고, 파일을 만들고, 당신이 좋아하는 이름으로 부르겠습니다. 제 경우에는 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);

가능한 한 간단하게 예제를 유지하려고 노력했습니다. 그리고 키를 누를 때마다 링크를 실행하기 때문에 API의 할당량이 매우 빠르게 소모됩니다.

물론 데이터를 테이블에 넣고 데이터베이스로 보내는 등 우리가 할 수있는 일에는 끝이 없습니다.