web-dev-qa-db-ja.com

クロスオリジンリクエストのCookieを設定する

Cookieをクロスオリジンで共有するには？具体的には、Set-CookieヘッダーをAccess-Control-Allow-Originヘッダーと組み合わせて使用​​する方法

これが私の状況の説明です。

localhost:4000でホストされているWebアプリのlocalhost:3000で実行されているAPIにCookieを設定しようとしています。

ブラウザーで正しい応答ヘッダーを受信して​​いるようですが、不幸にも効果がありません。これらは応答ヘッダーです。

 HTTP/1.1 200 OK 
 Access-Control-Allow-Origin：http：// localhost：3000 
 Vary：Origin、Accept-Encoding 
 Set-Cookie ：token = 0d522ba17e130d6d19eb9c25b7ac58387b798639f81ffe75bd449afbc3cc715d6b038e426adeac3316f0511dc7fae3f7;最大年齢= 86400; Domain = localhost：4000;パス= /; Expires = Tue、19 Sep 2017 21:11:36 GMT; HttpOnly 
 Content-Type：application/json; charset = utf-8 
 Content-Length：180 
 ETag：W/"b4-VNrmF4xNeHGeLrGehNZTQNwAaUQ" 
 Date：Mon、18 Sep 2017 21:11:36 GMT 
接続：キープアライブ

さらに、Chromeの開発者ツールの[ネットワーク]タブを使用してトラフィックを検査すると、Response Cookiesの下にCookieが表示されます。それでも、[アプリケーション]タブのStorage/CookiesにCookieが設定されているのがわかりません。 CORSエラーは表示されないため、他に何かが欠けていると思います。

助言がありますか？

更新I：

React-Reduxアプリで request モジュールを使用して、サーバー上の/signinエンドポイントにリクエストを発行しています。サーバーには、エクスプレスを使用します。

Expressサーバー：

 res.cookie（ 'token'、 'xxx-xxx-xxx'、{maxAge：86400000、httpOnly：true、domain： 'localhost：3000'}）

ブラウザでのリクエスト：

 request.post（{uri： '/ signin'、json：{userName： 'userOne'、password： '123456'}}、（err、response、body）=> {
//やること
}）

アップデートII：

現在、リクエストヘッダーとレスポンスヘッダーを狂ったように設定し、リクエストとレスポンスの両方にヘッダーが存在することを確認しています。以下はスクリーンショットです。ヘッダーAccess-Control-Allow-Credentials、Access-Control-Allow-Headers、Access-Control-Allow-Methods、およびAccess-Control-Allow-Originに注目してください。 Axiosのgithub で見つかった問題を見ると、必要なヘッダーがすべて設定されているという印象を受けています。それでも、まだ運がありません...

enter image description here

authenticationcookiescorshttp-headerslocalhost
27
Pim Heijden

するべきこと

CORSリクエストによるCookieの送受信を正常に許可するには、次の手順を実行します。

バックエンド（サーバー）：HTTPヘッダーを設定します Access-Control-Allow-Credentials value to true。また、HTTPヘッダー Access-Control-Allow-Origin が設定されていることを確認してください。

フロントエンド（クライアント）：XMLHttpRequest.withCredentials フラグをtrueに設定します。これはさまざまな方法で実現できます使用される要求/応答ライブラリに応じて：

または

CORSをCookieと組み合わせて使用​​する必要はありません。これはプロキシを使用して実現できます。

何らかの理由でそれを避けないでください。解決策は上記です。

ドメインにポートが含まれている場合、ChromeはCookieを設定しないことが判明しました。 localhost（ポートなし）に設定しても問題はありません。このヒントについて Erwin に感謝します！

55
Pim Heijden