通过 CORS 使用 Ajax 请求在浏览器上设置 Cookie
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14221722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set-Cookie on Browser with Ajax Request via CORS
提问by Calvin Froedge
Attempting to implement an ajax login / signup process (no refresh site with authentication). Using cookies for preserving state. I thought I'd have this right by now but for some reason browser doesn't set cookies after it gets them back from the server. Can anyone help? Here are the request and response headers:
尝试实现 ajax 登录/注册过程（没有带身份验证的刷新站点）。使用 cookie 来保存状态。我以为我现在就拥有这个，但是由于某种原因，浏览器在从服务器取回 cookie 后没有设置 cookie。任何人都可以帮忙吗？以下是请求和响应标头：
Request URL:http://api.site.dev/v1/login
Request Method:POST
Status Code:200 OK
Request Headers
请求头
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"}
Response Headers
响应头
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
I also see the cookie in chrome network tools, as returned from the server:
我还在 chrome 网络工具中看到了从服务器返回的 cookie：
Response Cookies
响应 Cookie
Name: site
Value: %2B1THQQ%2BbZkEwTYFvXFVV5fxi00l2K%2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8%2Fw%3D%3D
Domain: .site.dev
Path: /
Expires: Session
Size: 196
Http: ?
采纳答案by Fran?ois Zaninotto
Your AJAX request must be made with the "withCredentials" settings set to true (only available in XmlHttpRequest2 and fetch):
您的 AJAX 请求必须将“withCredentials”设置设为 true（仅在 XmlHttpRequest2 和 fetch 中可用）：
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;
If you want a detailed explanation on CORS, API security, and cookies, the answer doesn't fit in a StackOverflow comment. Check out this article I wrote on the subject: http://www.redotheweb.com/2015/11/09/api-security.html
如果您想详细了解 CORS、API 安全性和 cookie，答案不适合 StackOverflow 评论。看看我写的关于这个主题的这篇文章：http: //www.redotheweb.com/2015/11/09/api-security.html
回答by Andrew M. Andrews III
I had a similiar problem, and it turned out that the browser settings were blocking third-party cookies (Chrome > Settings > Advanced Settings > Privacy > Content Settings > Block third-party cookies and site data). Unblocking solved the problem!
我遇到了类似的问题，结果发现浏览器设置阻止了第三方 cookie（Chrome > 设置 > 高级设置 > 隐私 > 内容设置 > 阻止第三方 cookie 和站点数据）。解锁解决了问题！
