前端跨域（一）：CORS
上周做了一个移动端表单提交的页面，其中涉及到了跨域问题，想来也是惭愧，因为之前一直都没有遇到过这个问题，因此都没有深入探索过，只是知道有哪几种方式，这次终于借这个机会可以把遗留的知识点补一补了。
1. CORS（Cross-Origin Resource Sharing，跨源资源共享）
【基本思想】：使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
【实现方式】：
浏览器在发送请求时，检测到跨域时，会自动加上一个额外的 Origin 头部，其中包含请求页面的原信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。
Origin: http://www.nczonline.net如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的原信息（如果是公共资源，可以回发“*”）。
Access-Control-Allow-Origin: http://www.nczonline.net如果没有这个头部，或者有着头部但原信息不匹配，浏览器就会驳回请求。
注意：默认情况下，请求和响应都不包含 cookie 信息。
2. 跨域场景复原
为了模拟跨域，在自己的本地起了2个服务，一个采用 webpack 充当静态资源服务器（webpack 脚手架可参考：scaffoldsForFE），另一个用 Node 搭建，充当接受请求的服务器，分别给两个服务器分配了不同的端口号。
Client：http://localhost:8000
var oDiv = document.getElementById('content');
var xhr = new XMLHttpRequest();
xhr.onload = function() { // 响应接收完毕后将触发 onload 事件
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
oDiv.innerHTML = 'Request was success：' + xhr.responseText;
console.log('Request was success:', xhr.responseText);
} else {
oDiv.innerHTML = "Request was unsuccessful: " + xhr.status;
console.log("Request was unsuccessful： ", xhr.status);
}
}
}
xhr.open('get', 'http://localhost:8000', true); // 不跨域
// xhr.open('get', 'http://localhost:8888', true); // 跨域
xhr.send();Server：http://localhost:8888
var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('This is a server test page.');
res.end();
}).listen(8888);当 Client 端向 http://localhost:8000 发请求时，不存在跨域，能够成功返回页面信息，此时的页面及其发请求的 Request Headers 如下：
当 Client 端向 http://localhost:8888 请求服务的时候，由于存在跨域问题，无法获得响应：
但是其请求的头部自动带上了 Origin 字段，而且由于是默认情况，没有带上 Cookie：
解决的方式是，在 Server 端响应的时候，在 Access-Control-Allow-Origin 头部中回发相应的原信息：
var http = require('http');
http.createServer(function(req, res) {
// 设置响应头部
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('This is a server test page.');
res.end();
}).listen(8888);再重新请求，成功获得响应信息，且请求没有带上 Cookie：
由于在跨域时，默认情况下是不允许客户端向服务器发送请求时带上 Cookie 的，那怎样才能带上 Cookie 呢？需要同时在客户端和服务端同时设置相应字段：
（1）客户端在请求中打开 withCredentials 属性，指定某个请求应该发送凭据：
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;（2）服务端在响应头部中添加 Access-Control-Allow-Credentials 字段，且设为 true，表明服务器接受带凭据的请求：
res.setHeader('Access-Control-Allow-Credentials', true);
如果发送的是带凭据的请求，但服务器的响应中没有包含这个头部，那么浏览器就不会把响应交给 Javascript，则 responseText 是空字符串，status 的值为0，而且会调用 onerror() 事件处理程序。
cookie 是可以设置访问域的，在设置 cookie 的时候，设定了 cookie 的访问域名为一个顶级域名，则可以达到几个子域名共享 cookie 的效果，如腾讯网 www.qq.com 与微信网页版 wx.qq.com 共享了 pac_uid，关于前端存储的相关内容，可参考我之前在博客园写的博文：前端存储调研总结。
3. 模拟 GET 带参数 及 POST 跨域请求
i. GET 带参数跨域请求
Client 端：通过在URL后面加上查询参数
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.onload = function() { // 响应接收完毕后将触发 onload 事件
// 处理 xhr.responseText
}
xhr.open('get', 'http://localhost:8888?method=GET&name=Ruth', true);
xhr.send();Server 端：处理 GET 请求
var http = require('http');
var url = require('url');
http.createServer(function(req, res) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
res.setHeader('Access-Control-Allow-Credentials', true);
res.writeHead(200, {'Content-Type': 'text/plain'});
// 解析 url 参数
var params = url.parse(req.url, true).query;
res.write('请求类型：' + params.method);
res.write('<br />');
res.write('姓名：' + params.name);
res.end();
}).listen(8888);
ii. POST 跨域请求
不同于 JSONP，CORS 的好处就是可以让我们实现 POST 请求。
Client 端发送信息：
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.onload = function() { // 响应接收完毕后将触发 onload 事件
// 处理 xhr.responseText
}
xhr.open('post', 'http://localhost:8888', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置请求头
xhr.send('method=POST&name=Ruth'); Server 端处理请求：
var http = require('http');
var querystring = require('querystring');
http.createServer(function(req, res) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
res.setHeader('Access-Control-Allow-Credentials', true);
res.writeHead(200, {'Content-Type': 'text/plain'});
var post = '';
// 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量中
req.on('data', function(chunk) {
post += chunk;
});
// 在end事件触发后，通过querystring.parse将post解析为真正的POST请求格式，然后向客户端返回
req.on('end', function() {
post = querystring.parse(post);
res.write('请求类型：' + post.method);
res.write('<br/>')
res.write('姓名：' + post.name);
res.end();
});
}).listent(8888);
4. 参考资料
阮一峰-跨域资源共享 CORS 详解
AJAX POST&跨域 解决方案 - CORS
前端跨域的整理
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。