[解決済み] CORSです。資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できない。
質問
を含むセットアップがあります。
フロントエンドサーバ(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
を使用してはいけません。
*
. プロトコル + ドメイン + ポートを正確に指定する必要があります。参考までに、これらの質問をご覧ください。
その他
*
は寛容すぎて、クレデンシャルを使えなくなります。そこで
http://localhost:3000
または
http://localhost:8000
を allow origin ヘッダとして指定します。
関連
-
[解決済み] エラー「SCRIPT7002」の解決方法について。XMLHttpRequest: IEで「ネットワークエラー 0x80070005, アクセスは拒否されました。
-
[解決済み] Access-Control-Allow-Originヘッダーはどのように機能するのですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] Access-Control-Allow-Origin複数オリジンのドメイン?
-
[解決済み] REST APIからデータを取得しようとしたときに、要求されたリソースに'Access-Control-Allow-Origin'ヘッダーが存在しない。
-
[解決済み] プリフライト要求に対する応答がアクセス制御チェックを通過しない
-
[解決済み] アクセスコントロールリクエストヘッダは、jQueryでAJAXリクエストのヘッダに追加されます。
-
[解決済み] アクセス制御-許可-起源のワイルドカードサブドメイン、ポート、プロトコル
-
[解決済み】http://localhost CORS originが機能しないのはなぜですか?
-
[解決済み】リクエストヘッダーフィールドのAccess-Control-Allow-Headersが許可されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Google Maps APIがAJAX使用時のみ「Uncaught ReferenceError: google is not defined」を投げる。
-
[解決済み] エラー「SCRIPT7002」の解決方法について。XMLHttpRequest: IEで「ネットワークエラー 0x80070005, アクセスは拒否されました。
-
[解決済み] AJAX使用時にGoogle Maps APIが "Uncaught ReferenceError: google is not defined "を投げる。
-
[解決済み] RichFacesのa4j:ajaxタグのevent属性の取りうる値のリスト
-
jS Ajaxアップロードファイルのエラー "Uncaught TypeError: 不正な呼び出し"
-
[解決済み】WebSocketが使えるのに、なぜAJAXを使うのか?
-
[解決済み] POST JSONが415 Unsupported media typeで失敗する、Spring 3 mvc
-
[解決済み] HTTPリクエストがステータスコード0を返すのはどういう意味ですか?
-
[解決済み] XHRリクエストの応答としてリダイレクトを返す
-
[解決済み] ajax更新/レンダーのためのコンポーネントのクライアントIDを見つける方法?bar "から "foo "を参照する式でコンポーネントを見つけることができません。