同源策略--前端工程师从全栈的角度去看跨域

禁止一个源（origin）的脚本&文档和另一个源的脚本&文档交流

• 两个URL的protocol，port和host相同，那么同源

不希望一个源和另一个源有太多的交互。
允许修改dom
不允许获取远程图片内容，因为图片有可能是用代码编写而成的图片，可以用脚本解析。
不允许网站提交数据到不同源服务器
不允许网站提交cookie到不同源的服务器 

跨域的N种方法

Jsonp
利用不限制跨域脚本执行特点
可以用来提交数据

但是必须是get方式而且要放到url上面。可以但是没必要，不要用来提交

 

//服务端数据(data.js)
jsonp('example',{
    a:1,
    b:2
})

//index.html
function jsonp(topic,data){
    console.log(topic,data)
}
//加载跨域脚本
var script = document.createElement('script')
script.setAttribute('src','data.js')
document.getElementsByTagName('head')[0].appendChild(script)

 fetch 的jsonp
fetch 的method属性写jsonp就会自动解析成sc标签

fetch(<jseonp-url>,{method:'jsonp'}).then(data=>{
console.log(data)
})

跨域资源共用（CORS）

一般前端会加个node层代理
跨域资源共用（Cross-Origin Resource Sharing) 使用额外的HTTP头允许指定资源和另一个源进行交互
a请求b
Access-Control-Allow-Origin：https:a.com

 

预检

1. a发出OPTIONS的头部，并且会准备带上一些头部
2. b收到请求，就会去看自己支不支持这个同源策略
3. 发出请求，带上请求头，
4. b返回真实数据。

 

缺点
因为是一个请求
所以要消耗带宽
消耗请求。

代理服务
利用代理将不同源的资源代理到同源的资源里
中间加一个代理层

问题
交互链加长，

实战CORS（fetch+node.js）

 res.set('Access-Control-Allow-Origin', 'http://www.dev.com')
    // put 的情况
    // 需要Access-Control-Allow-Methods
    // 为什么Post，get不需要，因为他们是简单请求
    // 不行，去预处理那里加

子域之间也是跨域
子域和父域也是跨域
mode：'no-cors'
透明请求，会是一个虚假返回，没有数据的。

如何安全配置域名
1.先拿到源，分析源，共享一级域名。