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

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

私はセットアップをしています

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

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

ブラウザ (Web アプリ) --> Ajax --> Django (Ajax POST リクエストを処理)

ここで問題となるのは、WebアプリがバックエンドサーバーにAjax呼び出しを行うために使用するCORS設定です。Chromeでは、

資格情報フラグが 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
});

したがって、Web アプリケーションが送信するリクエスト ヘッダーは次のようになります。

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

ベストアンサー1

これはセキュリティの一部であり、これを行うことはできません。資格情報を許可する場合は、をAccess-Control-Allow-Origin使用しないでください*。正確なプロトコル + ドメイン + ポートを指定する必要があります。参考までに、次の質問を参照してください。

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

さらに、*許可が強すぎるため、資格情報の使用が無効になります。そのため、許可元のヘッダーとしてhttp://localhost:3000または を設定します。http://localhost:8000

おすすめ記事