CORS：（：localhostを：3000のNode.js、ドメイン）< --->バックエンド（資格情報フラグが真

Question

あるとき、私は

フロントエンドサーバーを含むセットアップを持っているアクセス制御 - 許可 - 起源でワイルドカードを使用することはできませんジャンゴ、アヤックス、ドメイン：localhostを：8000）

ブラウザ< - Webアプリケーション< - Node.jsの（サーブアプリ）

ブラウザ（Webアプリケーション） - >アヤックス - > Djangoは（AJAX POSTサーブリクエスト）

ここで私の問題はwebappがAjaxをバックエンドサーバーに呼び出すために使用するCORS設定。クロムでは、私は得るつもりです

Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.

は、いずれもfirefoxで動作しません。

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アプリケーションのようなリクエストになりthis middlewarealong with this

を使用しています：

マイNode.jsの設定がある

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

Answer 1

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

1. Access-Control-Allow-Origin wildcard subdomains, ports and protocols
2. Cross Origin Resource Sharing with Credentials

があまりにも寛容であると資格情報の使用を台無しにしてしまいます。そのため、許可元ヘッダーにhttp://localhost:3000またはhttp://localhost:8000を設定します。

Answer 2

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

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

app.use(cors()); 

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

Answer 3

あなたがCORSミドルウェアを使用していて、本当のwithCredentialブール値を送信する場合は、あなたがこのようなCORS設定することができます。

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

Answer 4

はそれを試してみてください。

const cors = require('cors') 

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

} 
app.use(cors(corsOptions));