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

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

发布于 2018-08-28 阅读 639 次 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端的操作介绍,后期再补充服务器端的。**