1. ホーム
  2. ajax

[解決済み] CORSです。資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できない。

2022-03-23 02:27:39

質問

を含むセットアップがあります。

フロントエンドサーバ(Node.js、ドメイン:localhost:3000) <---> バックエンド(Django、Ajax、ドメイン:localhost:8000)

ブラウザ <-- webapp <-- Node.js (アプリを提供する)

ブラウザ (ウェブアプリ) --> Ajax --> Django(Serve ajax POST requests)

さて、ここでの私の問題は、ウェブアプリケーションがバックエンドサーバーへのAjaxコールを行うために使用するCORSセットアップです。クロームで、私は以下を得続ける

<ブロッククオート

資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できません。

は、Firefoxでも動作しません。

私のNode.jsのセットアップは。

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

そして、Django では このミドルウェアは とともに、この

Webアプリはこのようにリクエストを行います。

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

つまり、ウェブアプリが送信するリクエストヘッダは、次のようになります。

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

そして、これがレスポンス・ヘッダです。

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

どこが間違ってるんだ!?

編集1:私はこれまで chrome --disable-web-security しかし、今、実際に動作するようにしたい。

編集2:回答

ということで、私なりの解決策 django-cors-headers のコンフィグを使用します。

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

解決方法は?

これはセキュリティの一部なので、できません。もしクレデンシャルを許可したいのであれば、あなたの Access-Control-Allow-Origin を使用してはいけません。 * . プロトコル + ドメイン + ポートを正確に指定する必要があります。参考までに、これらの質問をご覧ください。

  1. Access-Control-Allow-Origin ワイルドカードサブドメイン、ポート、プロトコル
  2. クレデンシャルを使用したクロスオリジンリソース共有

その他 * は寛容すぎて、クレデンシャルを使えなくなります。そこで http://localhost:3000 または http://localhost:8000 を allow origin ヘッダとして指定します。