通过CORS的Ajax请求在浏览器上设置Cookie [英] Set-Cookie on Browser with Ajax Request via CORS

问题描述

尝试实施ajax登录/注册过程（不使用身份验证刷新网站）。使用cookie保存状态。我认为我现在有这个权利，但由于某种原因，浏览器不设置Cookie，当它从服务器返回后。任何人可以帮助？以下是请求和响应标头：

 请求网址：http：//api.site.dev/v1/login 
请求方法：POST 
状态码：200 OK 
  

请求头

 接受：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 
连接：keep-alive 
 Content-Length：57 
 Content-Type：application / json; charset = UTF-8 
 Host：api.site.dev 
原产地：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请求使用：XMLHttpRequest 
请求有效负载
 {email：[e-mail]，密码：foobar} 
  

响应标题
$ b> 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
服务器：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，2013年1月10日18:23:14 GMT; path = /; domain = .site.dev; httponly
X-Powered-By：PHP / 5.4.7


在Chrome网络工具中，从服务器返回：

响应Cookie

 名称：site 
值：％2B1THQQ％2BbZkEwTYFvXFVV5fxi00l2K％2B6fvt9SuHACTNsEwUGzDSUckt38ZeDsNbZSsqzHmPMWRLc84eDLZzh8％2Fw％3D％3D 
域：.site.dev 
路径：/ 
 Expires：Session 
 Size：196 
 Http：✓
  

解决方案

您的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（）{
 //存储令牌和重定向
 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

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:

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":"[e-mail]","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:

Response Cookies

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

解决方案

Your AJAX request must be made with the "withCredentials" settings set to true (only available in XmlHttpRequest2 and 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的Ajax请求在浏览器上设置Cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！