web-dev-qa-db-ja.com

クロスオリジンリードブロッキング（CORB）

Jquery AJAXを使用してサードパーティAPIを呼び出しました。コンソールに次のようなエラーが表示されます。

クロスオリジンリードブロッキング（CORB）がクロスオリジン応答をブロックしました MY URL MIMEタイプapplication/json。詳細については https://www.chromestatus.com/feature/5629709824032768 を参照してください。

私はAjax呼び出しに次のコードを使用しました。

$.ajax({
  type: 'GET',
  url: My Url,
  contentType: 'application/json',
  dataType:'jsonp',
  responseType:'application/json',
  xhrFields: {
    withCredentials: false
  },
  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.log("FAIL....=================");
  }
});

私がFiddlerをチェックインしたとき、私は応答でデータを持っていましたが、Ajax成功方法では持っていませんでした。

私を助けてください。

javascriptjqueryajaxcorscross-origin-read-blocking
67
Jignesh

ほとんどの場合、ブロックされた応答はWebページの動作に影響を与えるべきではなく、CORBエラーメッセージは無視しても問題ありません。たとえば、ブロックされた応答の本文がすでに空の場合、または応答を処理できないコンテキスト（404エラーページなどのHTMLドキュメントなど）に応答が配信される場合に、警告が発生することがあります。タグに配信されています。

https://www.chromium.org/Home/chromium-security/corb-for-developers

ブラウザのキャッシュをきれいにしなければなりませんでした、私はこのリンクを読んでいました、要求が空の応答を得るならば、我々はこの警告エラーを得ます。私は私の要求でいくつかのCORSを得ていた、そしてこの要求の応答は空になった。私がしなければならなかったのはブラウザのキャッシュをクリアすることだけであり、そしてCORSは去った。クロムがキャッシュにPORT番号を保存していたのでCORSを受信して​​いました。キャッシュのため、サーバーはlocalhost:3010を受け入れるだけでlocalhost:3002を実行していました。

16
Marcelo Rafael
 dataType:'jsonp',

JSONP要求を出していますが、サーバーはJSONで応答しています。

セキュリティ上の問題があるため、ブラウザはJSONをJSONPとして扱うことを拒否しています。 （ブラウザが を JSONをJSONPとして扱おうとすると、せいぜい失敗するでしょう）。

JSONPとは何かについての詳細は この質問 を参照してください。 CORSが利用可能になる前に使用されていたSame Origin Policyを回避するのは厄介なハックです。 CORSは、この問題に対する、はるかにクリーンでより安全で強力な解決策です。

あなたがクロスオリジンのリクエストをしようとしていて、あなたがそれで考えることができるすべてを衝突している命令の1つの巨大な山に投げているように見えます。

Same Originポリシーがどのように機能するのかを理解する必要があります。

詳細なガイドは この質問 を参照してください。

今すぐあなたのコードについていくつかのメモ：

contentType: 'application/json',
  • JSONPを使用するとこれは無視されます
  • あなたはGETリクエストをしています。タイプを記述するためのリクエストボディはありません。
  • これはOrigin間のリクエストを単純ではないものにするでしょう。つまり、CORSの基本的な許可だけでなく、飛行前にも対処する必要があります。

それを削除してください。

 dataType:'jsonp',
  • サーバーはJSONPで応答していません。

これを削除してください。 （代わりにJSONPでサーバーに応答させることもできますが、CORSの方が優れています）。

responseType:'application/json',

これはjQuery.ajaxでサポートされているオプションではありません。これを削除してください。

xhrFields：{withCredentials：false}、

これがデフォルトです。 ajaxSetupでtrueに設定していない限り、これを削除してください。

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • これらはレスポンスヘッダです。それらは要求ではなく応答に属します。
  • これはOrigin間のリクエストを単純ではないものにするでしょう。つまり、CORSの基本的な許可だけでなく、飛行前にも対処する必要があります。
13
Quentin

ヘッダー 'Access-Control-Allow-Origin：*'でレスポンスを返します。Phpサーバーのレスポンスについては、以下のコードを確認してください。

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray);
6
Jestin

サーバー側にCORSを追加する必要があります。

nodeJS を使用している場合：

最初に 以下のコマンドを使用して corsをインストールする必要があります。

npm install cors --save

今すぐ （app.js or server.js）のようにアプリの起動ファイルに次のコードを追加します 

var express = require('express');
var app = express();

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'Origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

require('./router/index')(app);
4
Shubham Verma

ajaxリクエストのdataTypeをjsonpからjsonに変更しましたか？それは私の場合はそれを修正しました。

3
Cla

質問からは明らかではありませんが、これが開発またはテストクライアントで起こっていることを仮定して、あなたがすでにFiddlerを使用しているならば、あなたはFiddlerに許可応答で応答させることができます：

  • Fiddlerで問題の要求を選択してください
  • AutoResponderタブを開きます
  • Add Ruleをクリックして、ルールをに編集します。
    • 方法：OPTIONS ここにサーバーのURL 、例えば。 Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • Unmatched requests passthroughを確認してください
  • Enable Rulesを確認してください

いくつか注意してください。

  1. 明らかに、これはAPIサービスを変更することが不可能/実用的でない開発/テストのための唯一の解決策です
  2. サードパーティのAPIプロバイダとの間の合意によって、これが可能になることを確認してください。
  3. 他の人が指摘したように、これはCORSがどのように機能するかの一部であり、最終的にはヘッダをAPIサーバー上で設定する必要があるでしょう。そのサーバーを制御している場合は、ヘッダーを自分で設定できます。この場合それは第三者のサービスであるので、私はあなたが発信サイトのURLをあなたに提供することができるメカニズムを持っていると思うことができます、そして彼らはそれに応じて正しいヘッダで応答するためにサービスを更新します。
2
Colin Young

ローカルホストで作業している場合は、これを試してみてください、これは私のために働いた唯一の拡張機能と方法です（Angular、javascriptのみ、phpなし）

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=ja

1
pmiranda

このコンテキストで言及する価値のあるEdgeのケースがあります：Chrome（少なくとも一部のバージョン）CORB用に設定されたアルゴリズムを使用してCORSプリフライトをチェック。 IMO、プリフライトはCORB脅威モデルに影響を与えないようで、CORBはCORSと直交するように設計されているため、これは少しばかげています。また、CORSプリフライトの本体にはアクセスできないため、刺激的な警告だけで否定的な結果はありません。

とにかくCORSプリフライトレスポンス（OPTIONSメソッドレスポンス）に本文（204）がないことを確認してください。ここでは、コンテンツタイプがapplication/octet-streamで長さがゼロの空の200もうまく機能しました。

CORB警告とOPTIONS応答をメッセージ本文でカウントすることで、これがヒットしているかどうかを確認できます。

0
Simon Thum

応答ヘッダーは通常サーバーに設定されます。サーバー側で'Access-Control-Allow-Headers'を'Content-Type'に設定

0
lifetimeLearner007

Chrome拡張機能でも同じ問題が発生しました。マニフェストの「content_scripts」オプションにこの部分を追加しようとしたとき：

//{
    //  "matches": [ "<all_urls>" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

そして、マニフェストの「許可」から他の部分を削除します。

"https://*/"

XHRリクエストの1つでCORBを削除した場合にのみ消えます。

最悪なのは、私のコードにXHR要求がほとんどなく、そのうちの1つだけがCORBエラーを取得し始めることです（なぜCORBが他のXHRに現れないのか、なぜマニフェストの変更がこのエラーを引き起こしたのかはわかりません）。そのため、数時間ごとにコード全体を何度も検査し、多くの時間を失いました。

0
Олег Хитрень

私はApacheサーバーを実行していて、私のVirtualHostのDirectoryに次のHeader'sを追加しました。

    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all
            Header add Access-Control-Allow-Origin "*"
            Header add Access-Control-Allow-Methods "GET"
            Header add Access-Control-Allow-Headers "application/json"
    </Directory>
0
Jacksonkr

クロスオリジンリードブロッキング（CORB）、疑わしいクロスオリジンのリソース負荷がWebページに到達する前にWebブラウザによって識別およびブロックされる可能性があるアルゴリズム。 Webページに。

まず、これらのリソースが正しい "Content-Type"、つまりJSON MIMEタイプ - "text/json"、 "application/json"、HTML MIMEタイプ - "text/html"で提供されていることを確認してください。

2番目：モードをcorsに設定します、すなわちmode:cors

取得はこのようになります。

 fetch("https://example.com/api/request", {
            method: 'POST',
            body: JSON.stringify(data),
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                "Accept": 'application/json',
            }
        })
    .then((data) => data.json())
    .then((resp) => console.log(resp))
    .catch((err) => console.log(err))

参照先： https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_Origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers

0
Nikil Munireddy