跨域解决方案/同源/跨域/简单请求/复杂请求/jsonp

首先了解什么是跨域

1. 什么是跨域？

跨域是指在一个域的Web页面请求另一个域的资源时，由于浏览器的同源策略限制，这种请求可能会被阻止。

2. 源是什么？

https://www.baidu.com:8099
源 = 协议(https) + 域名(www.baidu.com) + 端口号(8099)

判断是否同源：

3. 同源策略又是什么？

同源策略是浏览器为了确保资源安全所遵循的一种安全策略

4. 同源请求与非同源请求

所处源与目标源不一致即为不同源，也就是跨域请求。

5. 浏览器对跨域请求的限制有哪些？

1）DOM访问限制： 源A的脚本不能访问到源B的DOM（可用ifream验证）
2）Cookie访问限制： 源A不能访问到源B的Cookie
3）Ajax响应数据限制：源A可以向源B发送请求，但是接收不到源B的响应数据

注意点：

• 跨域只发生在浏览器端，服务端不存在跨域限制
• 即使跨域， ajax请求可以发出，但是响应数据不会交给开发者
  
• <link> <script> <img>等标签请求也可能跨域，但是浏览器对标请求不做严格限制

---

解决跨域方案

1. JSONP（此解决方式已过时）

• 原理 通过在页面里添加script标签来实现跨域

function requestCall(data){
	console.log(data);
}

let script = document.createElement('script')
script.type = 'text/javascript'
script.src = `https://www.abc.com:8099?callback=requestCall`;
document.body.appendChild(script);

script.onload = ()={
	script.remove();
}

• jquery 封装的JSONP

$.getJSON(`https://www.abc.com:8099?callback=?`, (data)=>{
	console.log(data);
})

2. CORS（此方案需要服务器配合）

1）CORS概念

2）简单请求与复杂请求

关于预检请求：

• 发送时机：发送跨域请求之前有浏览器主动发出
• 主要作用： 用于向服务端确认，是否允许接下来的跨域请求
• 基本流程：先发OPTIONS请求，如果用过预检，则继续发跨域请求
• 请求头内容：

请求头	含义
Origin	请求源
Accsess-Control-Request-Header	实现请求的请求头
Accsess-Control-Request-Method	请求方法

3）解决简单跨域请求

请求头里面一般有Origin，表明发送请求的源

服务器给出响应时配置响应头Accsess-Control-Allow-Origin表明允许跨域，随后浏览器校验时即可通过

4）解决复杂跨域

先让浏览器通过预检配置如下响应头

响应头	含义
Accsess-Control-Allow-Origin	请求源
Accsess-Control-Allow-Header	允许请求头
Accsess-Control-Allow-Method	允许方法
Accsess-Control-Max-Age	本次预检请求的有效期，单位为秒

在处理真正的跨域请求 解决方案同简单跨域请求
可以寻找对应的库解决（node的cors）

3. nginx

location /user/ {
   proxy_pass url;
}

4. 利用前端脚手架

module.exports = {
   ...
devServer: {
   proxy: {
     '/api': {
       target: 'http://abc.com/login', // 后台接口域名
       secure: false, // 如果是https接口，需要配置这个参数
       changeOrigin: true, //是否跨域
       pathRewrite: {
         '/api': ''
       }
     }
   }
 }

5. 自己配置代理服务器(node http-proxy-middleware库)

 app.use("/api",
       createProxyMiddleware({
           target: 'http://localhost:3001',
           changeOrigin:true,
           pathRewrite: {
               '/api': ''
           }
   );

---

学习资源出处