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

私は関係するセットアップを持っています

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

ブラウザー<-webapp <-Node.js（アプリを提供）

ブラウザー（webapp）-> Ajax-> Django（ajax POSTリクエストを処理）

さて、ここでの私の問題は、webappがバックエンドサーバーへの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許可元ヘッダーとして設定します。

CORSミドルウェアを使用していて、withCredentialブール値true を送信する場合は、次のようにCORSを構成できます。

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));

使用している場合はexpress、使用することができますCORSをので、代わりにあなたのミドルウェアを書いているようにCORSを許可するようにパッケージ化。

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

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});

それを試してみてください：

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

すべてのオリジンを許可し、認証情報をtrueにしたい場合、これは私にとってはうまくいきました：

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));

（編集）以前にお奨めアドオンもはや利用できません、あなたは試みることが、この他の1を

Chromeでの開発の目的で、このアドオンをインストールする と、その特定のエラーが解消されます。

Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687' 
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

インストール後、アドオンIntercepted URLs（CORS、緑または赤）のアイコンをクリックして適切なテキストボックスに入力し、URLパターンをに追加してください。ここで追加するURLパターンの例http://localhost:8080は、次のようになります。*://*

これは私にとって開発では機能しますが、本番環境では、まだ言及されていないがおそらく最善ではない、仕事を完了するための別の方法であることはお勧めできません。とにかくここに行きます：

リクエストからオリジンを取得し、それをレスポンスヘッダーで使用できます。以下は、それがエクスプレスでどのように見えるかです：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

私はあなたのpythonセットアップでどのように見えるかわかりませんが、それは簡単に翻訳できるはずです。