跨域问题

【项目笔记】跨域问题

什么是跨域

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是 浏览器对javascript施加的安全限制。 • 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

跨域流程

CORS

CORS是一个W3C标准，全称是”跨域资源共享”(Cross-origin resource sharing)具体点这里

看名字就知道这是处理跨域问题的标准做法。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

巴拉巴拉，这些不是重点，如果大家想看更多，强烈建议去看阮一峰老师的博客

那么这里着重说一下，非简单请求。

非简单请求，在请求前，需要发送预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求(preflight)。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

跨域解决办法

1.使用niinx部署为同一域

2.配置当次请求允许跨域

1、添加响应头
• Access-Control-Allow-Origin：支持哪些来源的请求跨域
• Access-Control-Allow-Methods：支持哪些方法跨域
• Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含
cookie
• Access-Control-Expose-Headers：跨域请求暴露的字段
• CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如
果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。
• Access-Control-Max-Age：表明该响应的有效时间为多少秒。在有效时间内，浏览器无
须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果
该首部字段的值超过了最大有效时间，将不会生效。

3…..

办法相当多，合理使用