跨域解决方案处理
文章目录
首先了解什么是跨域
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': ''
}
);
原文地址：https://blog.csdn.net/qq_33327325/article/details/140360796
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！