什么是跨域请求

---

什么是同源策略 ？

同源策略

同源策略 (Same-Origin Policy) 最早由 Netscape 网景公司提出, 所谓 同源就是要求,协议，域名, 端口相同. 非同源的脚本不能访问或者操作其他域的页面对象(如DOM等). 作为著名的安全策略, 虽然它只是一个规范, 并不强制要求, 但现在所有支持 javaScript 的浏览器都会使用这个策略. 以至于该策略成为浏览器最核心最基本的安全功能, 如果缺少了同源策略, web的安全将无从谈起.

例:http://www.test.com:80

协议	域名	端口
http://	www.test.com	:80

IE 未将端口号加入到同源策略的组成部分之中

为什么要有同源策略

保证各个网页相互独立, 互相之间不能直接访问私密资源;如:Storage, Iframe, Ajax 均受其限制,而src,href 属性则允许跨域

类型	是否允许跨域
LocalStorage	否
SessionStorage	否
IndexedDB	否
WebSQL	否
Cookie	否
Ajax	否
href	是
src	是

注意

https地址中如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题.

解决方案

//编写请求地址时，使用//浏览器则会根据当前网站的加载方式去加载资源
<script src="//cdn.bootcss.com/jquery/3.3.1/core.js"></script>

错误提示

image.png

什么是跨域请求

既请求非同源资时，就会产生跨域请求

Origin 未允许

image.png

Header 未允许

image.png

解决跨域请求方案

方案	优缺点	推荐指数
JSONP	需要前后台配合调试，别切仅支持GET传参	不推荐
CORS	目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。	推荐
代理转发	只需要服务器进行设置,操作简单,与浏览器版本无关	推荐

CORS(跨域资源共享)

浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，复杂请求则会发送附加请求，简单请求则只发送一次

验证逻辑

复杂请求

请求方式PUT、DELETE 或者 Content-Type字段的类型是application/json、以及自定义Header（请求头），属于复杂请求，复杂请求则需要预先发起 OPTIONS（预先请求） 请求，OPTIONS 请求验证通过则才会发起正式请求

image.png

简单请求

请求方式为 HEAD、GET、POST , 请求头：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain ,两者必须同时满足则为简单请求。

浏览器则会在发起请求 Request Haders中添加 Origin： 字段 其中包含当前网站的 协议+域名+端口

image.png

则服务器端会在 Response Headers 返回 Access-Control-Allow-Origin：服务器端允许访问的 协议+端口+域名，* 表示所有人都可以访问。 Access-Control-Allow-Credentials: 它的值是一个布尔值，表示是否允许发送Cookie。

image.png

代理转发

image.png