-时间起源-
前段时间，需要弄个简单的网站出来，访问远程的api服务。
我是这么做的。首先是在搭建一个nodejs服务来运行前端页面。在我请求登录的时候，能成功返回相应的成功信息。然后，当我再次请求读取别的接口的时候，返回的信息确实提示我尚未登录。此时此刻，我一脸蒙逼。明明我已经登陆了啊。后来偶然得知这是因为浏览器的机制问题。
-初步解决-
大概的意思是，默认情况下，标准的跨域请求是不会发送cookie等用户认证凭据的。所以，当你再次访问远程api的时候，cookie是不会被带上的，于是乎，服务器理所当然地认为你还没有登录。MDN上的简单介绍 credentials 。用XMLHttpRequest请求的时候，我们需要设置属性 withCredentials=true ;
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'http://www.xxx.com/api');
- xhr.withCredentials = true;
- xhr.onload = onLoadHandler;
- xhr.send();
这样一来，cookie相关信息就会被带上了。
需要注意的是，当这个属性为true的时候，远程服务器也要作相应的处理。在响应头那里设置 Access-Control-Allow-Credentials: true 。如果没有这个设置的话，浏览器就会报错。
-引入新的问题-
然后，还有一点需要说明的是，当服务器设置了Access-Control-Allow-Credentials: true之后，Access-Control-Allow-Origin就不能设置为 * 了（别问我为什么知道，我也说不清楚，可能是考虑到安全问题吧）。这么一来，那就陷入一个困境了：远程服务就是应该设置为允许浏览器跨域访问的啊，这个属性不能这么设置的话，应该怎么搞呢？于是我查啊查，搜啊搜，终于把这个问题完美解决了。
-再度解决-
Access-Control-Allow-Origin的作用在于，允许特定白名单用户（浏览器）访问我这个接口。当设置为 * 的时候，表示所有用户都能访问。如果值为 'http://xxx.com'，则表示只接受来自这个域名的请求，其他的一律拒绝。而我们想要的效果就是想设置为 * 。自从用了Access-Control-Allow-Credentials: true，就不能设置Access-Control-Allow-Origin:'*'了。所有，我们可以换一种思路，当a用户进来的时候，我们设置a用户为白名单就好，同理b用户也是。也就是说，谁访问，我就设置谁为白名单。当浏览器进行跨域请求的时候，服务器能获取其相应的请求头，其中一个是 Origin 属性，表示请求的域。我们只要设置这域为白名单就好。每种服务器语言的设置方法可能都不一样，但原理是一样的。 大概如下
- responce.set('Access-Control-Allow-Origin', request.get('origin'));
好。ok了。
--------------------------------------------------------------
note: 上面的是使用原生的ajax请求，实际上很多人都选择诸如jquery这类框架。我之前是在beforeSend方法那里设置 xhr.withCredentials=true。然后悲剧地发现根本不能达到我的预期效果。其实，不是这么用的。应该是作为一个属性，而不是方法里面设置。与data属性并列设置就好。所以看起来是这样子的
- function func() {
- $.ajax({
- type: "GET",
- dataType: "json",
- xhrFields: {
- withCredentials: true // 要在这里设置
- },
- url: 'https://xxx.com/api/login',
- success: function (data) {
- },
- beforeSend: function (xhr) {
- // 下面的设置无效
- // xhr.withCredentials = true;
- },
- error: function (err) {
- alert(JSON.stringify(err))
- }
- })
- }
好了，故事完了。