web-dev-qa-db-ja.com

CORS：認証情報フラグがtrueの場合、Access-Control-Allow-Originでワイルドカードを使用できない

私はを含む設定があります

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

ブラウザ< - webapp < - Node.js（アプリを配信）

ブラウザ（ウェブアプリケーション） - > Ajax - > Django（Serve ajax POSTリクエスト）

さて、ここで私が抱えている問題は、Webアプリケーションがバックエンドサーバーへの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
});

そのため、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 config：

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/
)
ajaxdjangonode.jscorsdjango-cors-headers
229
ixaxaar

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

  1. Access-Control-Allow-Originのワイルドカードサブドメイン、ポート、およびプロトコル
  2. 資格情報とのクロスオリジンリソース共有

*はあまりにも寛容すぎて資格情報の使用を打ち負かすでしょう。そのため、Originの許可ヘッダとしてhttp://localhost:3000またはhttp://localhost:8000を設定します。

198
user568109

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

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

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

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

app.use(cors());

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

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

const cors = require('cors')

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

}
app.use(cors(corsOptions));
7
Iron shield

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.

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

3
eriel marimon

これは開発中の私には有効ですが、本番環境では、まだ言及されていないがおそらく最良ではない仕事を成し遂げるための別の方法であるとは言えません。とにかくここに行きます：

要求からOriginを取得し、それを応答ヘッダーで使用できます。エクスプレスでの外観は次のとおりです。

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

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

0
Renaud

あなたがすべての起源を許可し、信任状を忠実に保ちたいのであれば、これは私のために働きました：

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