跨域之二：JSONP 和 CORS
本节内容：实现跨域常用的两种方式 —— JSONP 和 CORS
零：跨域报错展示
在非同源情况下，调用 Ajax 向服务端请求数据时，浏览器会阻止这一操作，并且报错如下：
跨域报错 —— Ajax
既然出现了相应的问题，便会有对应的解决办法随之而生：可以使用 JsonP 和 CORS 解决跨域问题。
- 本节会做演练，所以首先修改 hosts 文件，本节演练 hosts 文件增添内容为：
127.0.0.1 localhost
127.0.0.1 a.yang.com
127.0.0.1 b.yang.com
127.0.0.1 yang.com
一、JSONP
因为需要突破同源策略，所以 JSONP 就应运而生了。
-
何为 JSONP？
两个定义结合来看，个人觉得更好一些。
可以简单来理解，JSONP 就是跨域的一种实现方式，不要让名称混淆视听。
JSONP 全称 JSON with Padding，是数据格式 JSON 的一种 “使用模式”，可用于解决主流浏览器的跨域数据访问的问题。—— 来自百度百科的解释
JSONP 是一种非正式传输协议，该协议的一个要点就是允许用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。—— 参考文章
-
JSONP 的原理
- 利用 script 标签不受同源策略影响，可以跨域引入外部资源的特性，让服务器端返回可执行的 JS 函数，将要返回的数据作为参数传进函数，以此实现跨域加载数据的目的
- 此时，绕过 Ajax，并未使用它，但同样达成了请求数据的目的
[](【备注】——script 标签引用资源得本质是：
1）向 src 发送请求
2）将资源下载到当前页面
3）当资源加载完毕后，把该资源当做 JS 代码来立刻执行——【备注】)
-
JSONP 的使用
- 动态创建 script 标签，src 地址指向数据接口，并传递 callback 参数
- 定义数据处理函数
- 服务端接收请求，解析参数，计算数，返回回调函数字符串
- 将回调函数字符串引入页面并作为 JS 去执行：此时会调用数据处理函数，数据会作为数据处理函数的参数被处理计算出一个结果
-
JSONP 的优缺点
-
优点
1）因 script 隶属于 HTML 的标签，所以不存在兼容问题 -
缺点
1）因需使用 URL 引入资源，所以 JSONP 仅支持 get 请求
2）因 script 标签会将资源作为 JS 代码执行，所以可能会被注入恶意代码 -
JSONP 演练
自己动手，丰衣足食。我来手动演练一番。
- 演练说明
1）实现的功能：非同源情况下，点击按钮，请求数据，并将数据展示在页面上
2）当前页面域：a.yang.com ；script 的 src 属性：b.yang.com；
3）请求的数据：长度为10的随机字符串，选值范围为26个小写英文字母 - 搭建 web 服务器工具：server-mock
前端 index 代码
var btn = document.querySelector('.btn'),
panal = document.querySelector('.panal');
btn.addEventListener('click', function () {
var script = document.createElement('script');
script.src = 'http://b.yang.com:8080/loadData?callback=onSuccess';
document.head.appendChild(script);
document.head.removeChild(script);
});
function onSuccess(data) {
panal.innerText = data;
}
服务端 router 代码
app.get('/loadData', function(req, res) {
var dataStr = '';
var len = 10;
var disc = 'abcdefjhigklmnopqrstuvwxyz';
for(var i = 0; i < len; i++){
dataStr += disc[Math.floor(Math.random() * disc.length)];
}
var callback = req.query.callback;
data = callback + '(' + JSON.stringify(dataStr) + ');';
res.send(data);
});
- 尝试改变当前页面的域，与 AJAX 请求域相同或不同，体会一下浏览器的跨域请求、报错提示、同源策略、实现跨域请求。
二、CORS
因为 JSONP 存在缺点，所以在发展过程中，便会有新的技术出现来更好的解决跨域问题，这时出现了 CORS。
-
何为 CORS？
CORS 就是一种跨域问题的解决方案：它定义了一种跨域访问的机制，允许网页从不同的域访问其资源。与 JSONP 相比，更为方便可靠。
CORS 全称 Cross-Origin Resource Sharing，即：跨来源资源共享。它是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。——来自必应的解释
-
CORS 的原理
- 当使用 XMLHttpRequest 发送请求时，如果浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin；
- 后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin；
- 浏览器判断该响应头中是否包含 Origin 的值：
- 如果包含浏览器则会处理响应，前端就可以拿到响应数据；
- 如果不包含浏览器直接驳回，此时前端无法拿到响应数据。
简单来说，就是浏览器匹配请求头和响应头，如果符合要求便可拿到数据，否则无法拿到数据。整个过程都是由浏览器自动完成。这就像一个白名单，代表着谁可以拿到数据。
-
CORS 的使用
-
前端：正常使用 AJAX 发送请求
-
服务端：若确定接受请求，则在返回结果中加入响应头：Access-Control-Allow-Origin
-
CORS 的优缺点
-
优点
1）使用简单方便、更为安全
2）支持 POST 请求方式 -
缺点
1）CORS 是一种新型跨域问题的解决方案：存在兼容问题——仅支持 IE10 以上 -
CORS 的演练
自己动手，丰衣足食。我来手动演练一番。
- 演练说明
1）实现的功能：非同源情况下，点击按钮，请求数据，并将数据展示在页面上
2）当前页面域：a.yang.com ；Ajax 请求域：b.yang.com；
3）请求的数据：长度为10的随机字符串，选值范围为26个小写英文字母
4）请求方式：post - 搭建 web 服务器工具：server-mock
前端 index 代码
var btn = document.querySelector('.btn'),
panal = document.querySelector('.panal');
btn.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
if(xhr.status === 200){
onSuccess(xhr.responseText);
}
}
}
xhr.open('post', 'http://b.yang.com:8080/loadData', true);
xhr.send();
});
function onSuccess(data) {
panal.innerText = data;
}
服务端 router 代码
app.post('/loadData', function(req, res) {
var disc = 'abcdefjhigklmnopqrstuvwxyz';
var data = '';
for(var i = 0; i < 10; i++){
data += disc[Math.floor(Math.random() * disc.length)];
}
res.header("Access-Control-Allow-Origin", "http://a.yang.com:8080");
res.send(data);
});
- 尝试改变当前页面的域，与 AJAX 请求域相同或不同，体会一下浏览器的跨域请求、报错提示、同源策略、实现跨域请求。
最后：jsonp 和 cors 都是主流的跨域方式，最主要的还是看需求，其中最大的问题就是兼容程度，请按需选择。
本文章著作权归饥人谷和本人所有，转载须说明来源！
