什么是同源策略 ？
同源策略
同源策略 (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
