ヘッダーにもかかわらずFirefoxの「クロスオリジン要求がブロックされました」

単純なクロスオリジンリクエストを作成しようとしていますが、Firefoxは常に次のエラーでブロックしています。

Cross-Origin Request Blocked：Same Origin Policyは、[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拡張機能であるプライバシーバッジがリクエストをブロックしていることがわかりました。

頭をひっかいた後でこの質問にたどり着いた場合は、インストールした拡張機能をチェックして、それらのいずれかがリクエストをブロックしていないか確認してください。

詳しくは、理由：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（クロスオリジンリソースシェアリング）を設定すると、すべてを通過できます。ベンジャミンホーン

ただし、Apacheサーバー（.htaccessフォルダー内）でこれらのヘッダーを設定した後、Firefoxは本当に奇妙な動作をしていました。

console.log("Hi FF, you are here A")何が起こっているのかを確認するために、私はたくさんのその他を追加しました。

最初はそれが絞首刑にされたように見えましたxhr.send()。しかし、私はそれがこの声明に達していないことを発見しました。私はそのconsole.log直前に別のものを置き、そこに到達しませんでした-最後のものconsole.logと新しいものの間に何もなかったにもかかわらず。それはちょうど2つの間に停止しましたconsole.log。

行を並べ替え、削除して、ファイルに奇妙な文字がないか確認します。何も見つかりませんでした。

Firefoxを再起動すると問題が解決しました。

はい、バグを報告する必要があります。それはそれがとても奇妙なだけなので、それを再現する方法がわかりません。

注意：そして、ああ、私はそのHeader always set部分ではなく、Rewrite*部分をやっただけです！

追加するだけ

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

.htaccess接続しようとしているWebサイトのルートにあるファイルに。

後世については、サーバーログをチェックして、リクエストされているリソースが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リクエストを黙って飲み込み、ステータス0をXHRに返します。警告はJavaScriptコンソールに出力されませんが、他の同様の失敗の場合は少なくとも何かを言っています。あいあい。

デバッグするには、可能であればサーバーのログを確認してください。Firefoxは、さまざまな理由でコンソールにCORSエラーを返します。

理由の1つは、uMatrix（および私もNoScriptと同様のものと思われます）プラグインです。

私は同様の問題に直面しました、そして私がそれをどのように修正したかを登録することは有効だと思います：

私は基本的にSymfony 3上に構築されたシステムを持っています。自己学習とパフォーマンスの目的で、GoLangを使用していくつかのスクリプトを作成することに決めました。また、パブリックアクセスのAPIを使用します。

私のGo APIはJson形式のパラメーターを期待し、Json形式の応答も返します

私が使用しているGoApiを呼び出すには、ほとんどの場合、$。ajax（jQuery）です。次に、「Access-Control-Allow-Origin：*」をapache conf、htaccess、php、javascript、およびGoogleで見つけられる場所に設定しようとしました。

しかし、同じイライラするエラー!!!

解決策は簡単でした。「GET」ではなく「POST」リクエストを作成する必要がありました。

これを実現するには、GoLangとJavaScriptの両方を調整してGETを使用する必要がありました。完了すると、Cross-Origin Requestがブロックされなくなりました!!!

それが役に立てば幸い

PS：

私は私が持っているディレクトリブロックで、Apacheと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

リクエストヘッダー（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

上記の回答が役に立たない場合は、バックエンドサーバーが稼働中であるかどうかを確認します。私の場合と同様に、サーバーがクラッシュし、このエラーは完全に誤解を招くことがわかりました。

私の場合、それは私の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の割り当てはかなり速く消費されます。

もちろん、データをテーブルに配置したり、データベースに送信したりするなど、私たちができることには終わりがありません。