一、什么是跨域
跨域问题来自于浏览器同源策略的限制，包括DOM同源限制和Ajax同源限制，本文探讨的是Ajax跨域。Ajax跨域指的是一个页面的Ajax只能请求和当前页面同源的数据，如果发现请求到的数据不符合要求，浏览器就会阻止返回的数据。所谓同源，指的是协议、域名、端口号都必须完全相同（同一IP的不同域名也是跨域）。同源策略的主要目的是防止CSRF攻击，它可以有效地避免由于恶意攻击带来的危险，浏览器同源策略使得网络访问更加安全。
但是，实际开发与生产中，常常获取使用来自其他站点的资源，这时候就需要发起跨域请求，也就需要使用特殊的方法来处理，使得我们能够获得想要的数据。由此可知，跨域仅限于浏览器中，是由于浏览器对不同源数据的拦截产生的，跨域有时候是不可避免的，我们需要采取措施实现跨域请求。
二、跨域构成条件
- 浏览器限制：浏览器本身限制跨域
- 跨域请求：发起的请求是跨域的
- XHR（XMLHttpRequest）类型：请求类型是XHR请求
由上可知，解决跨域问题可以从上面三个方面着手，只需解决其一，则跨域问题也就不存在了。
三、跨域问题解决方案
- 浏览器限制方式
解决浏览器限制的方式可以通过命令：
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dir=E:\chrome.log来解除浏览器默认的Web安全限制；这里使用chrome浏览器做了解释。
-
跨域请求方式
CORS
CORS中文是“跨域资源共享”（Cross-origin resource sharing），是W3C支持的一种新的跨域方式，它与其它的方式不同的是，它是写入标准的跨域请求方式，现代浏览器普遍支持。它允许在服务器支持的前提之下，像发起普通ajax请求一样发送跨域请求。除了get请求CORS支持其它种类请求。
CORS请求分为简单请求和非简单请求两种，简单请求需要满足以下两个条件：
1）请求方法是以下三种方法之一：
-
- HEAD
- GET
- POST
2）HTTP的头信息不超出以下几种字段：
-
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
除此之外都是复杂请求，对于简单请求和复杂请求浏览器的处理方式不同。
对于简单请求，浏览器会在请求头中添加Origin字段来指明本次请求源，服务器会对发来的请求进行检查，对于符合条件的请求，服务器会在返回头信息中添加Access-Control-Allow-开头的相关字段。
对于非简单请求，正式请求之前会增加一次OPTIONS请求来进行”预检”，此次请求会带上请求源，服务器会校验是否符合条件，如果不符合会返回一个不带任何CORS相关的头信息字段，浏览器就会知道请求不允许，触发错误，停止继续发送请求。
CORS重点就在服务器上，只要配置了允许CORS，就可以正常发送请求，非常方便且安全性好，具体的服务器配置取决于服务端的不同实现。
服务器代理
这是一种终极的解决方案，因为限制只存在于浏览器中，在其他环境下是不存在的，服务器中自然也不存在，所以只需要在服务器做好请求代理，请求变成同源（请求方式变成同源的请求，但资源依旧是跨域获取的）的自然就不存在问题了。
- XHR类型
JSONP
首先最有名的一种方式就是JSONP，在学习JSONP之前首先要知道虽然浏览器有同源限制，但是有三个标签是不符合这种限制的<img>标签的src（获取图片）属性，<link>的href（获取css）属性，<script>的src（获取javascript）属性，这是由他们的自身特性所决定的。而JSONP则是利用了script标签不限制同源的特点来实现的、也就是说JSONP发出的不是XHR请求，而是script请求。
JSONP原理：
1.JSONP发送的请求是script请求，区别于XHR请求，不存在跨域的问题。
2. 普通的XHR请求返回的是JSON数据对象，JSONP返回的是一个JS脚本。
3. 请求URL的不同，请求带有callback字段
清楚了JSONP的原理之后，再看JSONP其实很简单了，下面来看一个简单的小例子。
假设客户端需要获取的JSON数据{code: 200, data: “success”},一个简单的服务端实现如下（使用node.js原生http模块）
|
1
2
3
4
5
6
7
8
9
10
11
12
|
const http = require(‘http‘);
const url = require(‘url‘);
http.createServer((req, res) => {
if (req.url.startsWith(‘/test‘)) {
res.writeHead(200, {‘Content-Type‘: ‘text/plain‘});
const callback = url.parse(req.url, true).query.callback;
const result = ‘{code: 200, data: "success"}‘;
const jsonpCallback = `${callback}(${result})`
res.end(jsonpCallback);
}
}).listen(8888);
|
客户端的请求如下
|
1
2
3
4
5
6
7
|
<script>
function jsonpCallback (res) {
// 在这里处理请求结果
console.log(res);
}
</script>
<script src="http://127.0.0.1:8888/test?callback=jsonpCallback"></script>
|
综合客户端和服务端的代码可以看出，在客户端，通过请求参数传递一个JSONP方法名，在服务器端，返回的结果使用指定的JSONP方法调用来包装，这样相当于请求了一段JS，而真正的返回结果可以通过函数调用参数来获取，这样就可以绕开浏览器同源限制，获取跨域请求结果。
JSONP是一种常用的跨域方式，目前有很多前端的JSONP请求封装，它们通过通过动态创建script标签来实现，我们可以直接调用。JSONP方式兼容所有的浏览器，但是只支持get请求。
JSONP弊端
- 服务器端需要改动。
- 只支持GET方法。
- 发送的不是XHR请求，无法使用各种XHR各种优势。
