一、什么是跨域

跨域问题来自于浏览器同源策略的限制,包括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模块)

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);

客户端的请求如下

<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各种优势。