当前位置:首页 > 关于前端跨域的问题,cors跨域那点事,cors实现跨域,解决跨域的方法

关于前端跨域的问题,cors跨域那点事,cors实现跨域,解决跨域的方法

发布于 2018-08-28 阅读 177 次 Ajax Javascript

摘要:

之前的文章已经介绍过几个解决跨域的方法,今天这篇文章,我们来说说,一种简单的跨域方法cors。这种方式适用于支持es5的浏览器。而且各个浏览器支持并不统一。

CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

CORS验证机制需要客户端和服务端协同处理。

可以百度can i use查询支持情况

使用

客户端
基于CSRF的风险,各主流的浏览器都会对动态的跨域请求进行特殊的验证处理。验证处理分为简单请求验证处理和预先请求验证处理。

简单请求:

简单请求满足下面两个条件,浏览器会直接使用设定的请求方式发送请求,在同一个请求中做跨域权限的验证。

1、请求方式下列中的一个:
GET
HEAD
POST

2、head信息不能超出以下几个:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type,

请求头中的Content-Type请求头的值是下列之一
application/x-www-form-urlencoded
multipart/form-data
text/plain

简单请求时,浏览器会直接发送跨域请求,并在请求头中携带Origin 的header,表明这是一个跨域的请求。
服务器端接到请求后,会根据自己的跨域规则,通过Access-Control-Allow-Origin和Access-Control-Allow-Methods响应头,来返回验证结果。

♦ 验证成功:则会直接返回访问的资源内容。

♦ 验证失败:则返回403的状态码,不会返回跨域请求的资源内容。

非简单请求

不满足简单请求条件的即为非简单请求了,此时浏览器会发送一个options请求进行试探,和服务器协商看是否允许跨域。如果验证通过浏览器会再次发送事先设定的请求,已得到返回数据。

我么大多时候content-type会设置为application/json,这样就会多一倍的请求,浪费服务器资源。

通过某种手段是可以避免这个option请求的。
用nginx做了代理可以解决,具体待我学习后,再写文章。

带认证的请求

默认情况下,跨源请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据。
Access-Control-Allow-Credentials: true

这里只做了web端的操作介绍,后期再补充服务器端的。