web-dev-qa-db-ja.com

CORSが機能していませんChrome

サーバーでCross-Origin Resource Sharingを設定しました（CrossOriginFilterを使用するJetty）。IE8およびFirefoxで完全に動作します。 Chromeでは、...そうではありません。

  $.ajax({ url : crossOriginURL,
    type : "GET",
    error : function(req, message) {
        alert(message);
    },
    dataType :  "json" } );

エラー関数が呼び出され、有用なメッセージ「エラー」が表示されます。リクエストを行っているようですが、期待するヘッダーはありません。 URLが同じOriginからのものであれば、正常に機能します。

javascriptjquerygoogle-chromecors
29
Malvolio

最終的に私のために働いたのはxhr.setRequestHeader('Content-Type', 'text/plain');です

12
Malvolio

この方法で問題を解決しました：

これをPHPコードに追加：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");

または、これらのヘッダーを応答に追加します。

問題：ブラウザーは、メインリクエストの前にサーバーにオプションを求め、サイトに異なるオリジンとの通信を許可するオプションがあるかどうかを確認し、そうであれば、POSTまたはGETリクエスト。

編集：これを（ハックせずに）試して、データを受信して​​いるかどうかを確認してください...

$.ajax({ url : crossOriginURL,
    type : "GET",
    error : function(req, message) {
        alert(message);
    },
    success : function(data) {
        alert(data);
    },
    dataType :  "text"} );
24
cusspvz

元のポスターが問題を解決したように見えますが、コメンテーターのエリザベスと同じ問題を抱えている人にとっては、問題はChrome CORSのOriginヘッダーの設定を拒否しているローカルファイルからリクエストを実行している場合は、リクエストを送信します。明示的にOriginヘッダーをオーバーライドすることもできません。これにより、サーバーには「Origin：null」が表示され、ほとんどの場合403になります。多くの髪を引っ張った後に見つけたような制約。

この場合にChromeを絶対に使用する必要がある場合は、webserverをローカルで実行し、file：ではなくhttp：を介して常にファイルにアクセスすることで問題を解決できます。

13
Eric

資格情報を許可し、Originのヘッダーを*に設定するようにサーバーを設定していないことを確認してください。以下のように：

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

サーバーがこれらのヘッダーにこれらの値を返している場合、機能しません。 Access-Control-Allow-Credentialsをtrueに設定した場合、*ヘッダーの値としてAccess-Control-Allow-Originを使用できません。以下は、ヘッダーのMDN Webdocsからの抜粋です（ https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin ）：

For requests without credentials, the literal value "*" can be specified, as a wildcard; 
the value tells browsers to allow requesting code from any Origin to access the resource. 
Attempting to use the wildcard with credentials will result in an error.

上記の場合は、Access-Control-Allow-Credentialsをfalseに設定するだけです。

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: false

参照資料

0
king

私の場合、localhost：8001（フロントエンド）がlocalhost：7001（server.jsでNode server）としてAPIを呼び出します。CORSプラグインさえ持っていました。 Chromeにインストールしてオンにしても、CORSポリシーはそれらをプリフライトケースとして拒否しました。

問題を最終的に解決するのに半日以上かかりました。信じられないかもしれませんが、ここに「愚かな」ステップがあります。

私。 CORSプラグインをオフにし、アプリをリロードします。この時点で、正しいエラーが表示されるはずです。

ii。再びオンにし、アプリをリロードします。APIが成功したら、ここで停止します。iiiに進む必要はありません。

iii。ただし、引き続きCORS拒否が表示される場合は、Chromeをアンインストールして、最新のChromeをインストールしてください。

iv。新しいChromeでは、以前にインストールされたCORSプラグインはまだ存在するはずですが、ステータスはOFFです。

v。ページをリロードすると、正しいコンソール上のCORS拒否メッセージが表示されます。

vi。 ONに戻し、ページをリロードすると、エラーが消えます。

上記の手順で問題が解決しない場合、これ以上のアイデアはありません。

Server.js（ノード）で次のことも試しましたが、まだ動作しません。

var app = express();
var cors = require('cors'); // Already done “npm i cors --save-dev”
app.options('*', cors());
0
Daniel C. Deng

chrome私が問題に直面していたとき、私はそれを解決しましたGoogle拡張機能「アクセス制御-許可-資格情報」新しいバージョン。古いバージョンの場合、あなたは必要ありません新しいGoogle Chromeバージョンで作業する

https://chrome.google.com/webstore/detail/access-control-allow-cred/hmcjjmkppmkpobeokkhgkecjlaobjldi?hl=en

0
Siddhartha Mukherjee