同源策略和解决跨域问题

同源策略

• 同源策略是由浏览器给的
• 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求
• 当我们想向别人的服务器发送请求的时候，就会被浏览器阻止了
• 什么是 “别人的服务器” 呢？
  • 当 请求协议/域名/端口号 有任意一个不同的时候，那么就算是别人的服务器
  • 这个时候就会触发同源策略
• 我们管触发了 同源策略 的请求叫做跨域请求

实现一个跨域请求

• 有的时候我们是需要实现跨域请求的
• 我们需要多个服务器给一个页面提供数据
• 那么这个时候我们就要想办法解决跨域问题

1，JSONP

• jsonp 是我们实现跨域请求的手段，是把我们之前的东西组合在一起使用的技术手段而已
• 利用的是 script 标签来实现

script 标签的本质

• 浏览器给我们提供了一个 script 标签
• 它的本质就是请求一个外部资源，是不受到同源策略的影响的
• 同时 script 标签的 src 属性，也是一种请求，也能被服务器接收到
• 并且：
  • script标签的src属性请求回来的东西是一个字符串，浏览器会把这个字符串当作 js 代码来执行
• 所以我们就可以利用这个 script 标签的 src 属性来进行跨域请求了

2，配置代理

（1）正向代理

• 有一个客户端需要向一个非同源的服务器B发送请求
• 我们搭建一个和客户端同源的服务器A
• 当客户端发送请求的时候，由服务器A来接受
• 再由服务器A向服务器B发送请求，因为 同源策略是由浏览器给的，服务器之间没有
• 服务器B接受到请求以后，会处理请求，并把响应返回给服务器A
• 再由服务器A把响应给到客户端就可以了
• 我们就可以用这个方式来进行跨域请求了

(2)反向代理

• 反向代理一般是用来做负载均衡的
• 当我请求一个服务器的时候，其实请求的是服务器端设置的代理服务器
• 由代理服务器把若干大量的请求分发给不同的服务器进行处理
• 再由服务器把响应给到代理服务器
• 代理服务器返回给客户端

方法：在配置文件中

proxy:{
        "/api": {//这个名字可以随便取，是你要代理的名字
            target: "http://www.wyyijiaqin.com"//这个是你本来要访问的跨域站点
            }
     }

3，xhr2

对于遇到的跨域问题，其实我们向服务器的请求发送出去了，服务器端也响应了，将数据返回了，但是，在响应的数据到达浏览器之后，浏览器会去比较一下返回数据的域名和本域名是否相同，如果不同，数据就会被丢弃
解决：我们只要让服务器告诉浏览器，说这个数据是安全的就可以了
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’);

4，cors

CORS是一个w3c标准,全称是"跨域资源共享"(Cross-origin resource sharing),但一个请求url的协议,域名,端口三者之间任意与当前页面地址不同即为跨域.它允许阅览器向跨源服务器发送XMLHttpRequest请求,从而客服AJAX只能同源使用的限制.

如果你使用的是node开发，那么跨域下载cors这个包，因为它被npm管理
（1）npm i cors
（2）在你的项目中引入
（3）app.use(cors())就OKl