web-dev-qa-db-ja.com

CORS経由のAjaxリクエストを使用したブラウザのSet-Cookie

Ajaxログイン/サインアッププロセスを実装しようとしています（認証付きのサイトを更新しません）。状態を維持するためにCookieを使用します。私は今すぐこれを持っていると思っていましたが、何らかの理由でブラウザがサーバーからクッキーを取得した後、クッキーを設定しません。誰でも助けることができますか？要求と応答のヘッダーは次のとおりです。

Request URL:http://api.site.dev/v1/login
Request Method:POST
Status Code:200 OK

リクエストヘッダー

Accept:application/json, text/plain, */*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:57
Content-Type:application/json;charset=UTF-8
Host:api.site.dev
Origin:http://site.dev
Referer:http://site.dev/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.101 Safari/537.11
withCredentials:true
X-Requested-With:XMLHttpRequest
Request Payload
{"email":"[email protected]","password":"foobar"}

応答ヘッダー

Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With, Content-Type, withCredentials
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:http://site.dev
Connection:Keep-Alive
Content-Length:19
Content-Type:application/json
Date:Tue, 08 Jan 2013 18:23:14 GMT
Keep-Alive:timeout=5, max=99
Server:Apache/2.2.22 (Unix) DAV/2 PHP/5.4.7 mod_ssl/2.2.22 OpenSSL/0.9.8r
Set-Cookie:site=%2B1THQQ%2BbZkEwTYFvXFVV5fxi00l2K%2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8%2Fw%3D%3D; expires=Thu, 10-Jan-2013 18:23:14 GMT; path=/; domain=.site.dev; httponly
X-Powered-By:PHP/5.4.7

また、サーバーから返されるchromeネットワークツールにCookieが表示されます。

応答Cookie

Name: site
Value: %2B1THQQ%2BbZkEwTYFvXFVV5fxi00l2K%2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8%2Fw%3D%3D
Domain: .site.dev
Path: /
Expires: Session
Size: 196
Http: ✓
ajaxhttpcookiescors
44
Calvin Froedge

AJAXリクエストは、「withCredentials」設定をtrueに設定して行う必要があります（XmlHttpRequest2およびフェッチでのみ使用可能）：

    var req = new XMLHttpRequest();
    req.open('GET', 'https://api.bobank.com/accounts', true); // force XMLHttpRequest2
    req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
    req.setRequestHeader('Accept', 'application/json');
    req.withCredentials = true; // pass along cookies
    req.onload = function()  {
        // store token and redirect
        let json;
        try {
            json = JSON.parse(req.responseText);
        } catch (error) {
            return reject(error);
        }
        resolve(json);
    };
    req.onerror = reject;

CORS、APIセキュリティ、およびCookieの詳細な説明が必要な場合、答えはStackOverflowコメントに収まりません。このテーマについて書いたこの記事をご覧ください： http://www.redotheweb.com/2015/11/09/api-security.html

31
François Zaninotto

同様の問題が発生し、ブラウザーの設定がサードパーティのCookieをブロックしていることが判明しました（Chrome>設定>詳細設定>プライバシー>コンテンツ設定>サードパーティのCookieとサイトデータをブロックする）。ブロックを解除すると問題は解決しました！

10
Andrew M. Andrews III