1 什么是跨域?
同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。
示例 | 跨域原因 |
www.jd.com 与 www.taobao.com | 域名不同 |
www.jd.com:8081 与 www.jd.com:8082 | 域名相同,端口不同 |
item.jd.com 与 item2.jd.com www.baidu.jd.com 与 www.baidu.tieba.com | 二级域名不同 |
跨域问题 是针对ajax请求的一种限制。只有发送ajax请求才会发生跨域问题.
跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制:一个页面发起的ajax请求,只能是于当前页同域名的路径,这能有效的阻止跨站攻击。
2 解决跨域问题的方案
1、JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个<script>元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。
1 原生实现:
<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求,该请求的查询字符串有一个callback参数,用来指定回调函数的名字
// 处理服务器返回回调函数的数据
<script type="text/javascript">
function dosomething(res){
// 处理获得的数据
console.log(res.data)
}
</script>
2 JQuery ajax实现:
$.ajax({
url: 'http://www.test.com:8080/login',
type: 'get'
dataType: "jsonp", // 请求方式为jsonp
data: {'a': 1},
success: function(data){
console.log(data);
}
});
3 Vue.js 实现:
this.$http.jsonp('http://www.domain2.com:8080/login', {
params: {},
jsonp: 'handleCallback'
}).then((res) => {
console.log(res);
})
2 前端解决方案
在开发环境,前端可以通过在vite.config.ts 中配置代理服务器。但是如果需要代理多个地址,比如: ‘/’ 指向 192.168.1.1,‘/api’ 指向 192.168.1.2,‘/api/network’ 指向 192.168.1.3。
module.exports = definConfig({
devServer: {
proxy: {
"/api/network": {
target: "http://192.168.1.1:8080", // 目标路径
changeOrigin: true, // 改变请求源
secure: false, // 不使用HTTPS
pathRewrite:{
'^/api/network': ''
}
},
"/api": { // 所有通过/api的请求都会代理到下面http://192.168.1.2:8080
target: "http://192.168.1.2:8080",
changeOrigin: true,
secure: false,
//移除url里面的api,比如 /api/user/login 代理过来就行http://192.168.1.2:8080/user/login
pathRewrite:{
'^/api': ''
}
},
"/": {
target: "http://192.168.1.3:8080",
changeOrigin: true,
secure: false,
pathRewrite:{
'^/': ''
}
},
},
},
});
需要在接口前面添加比如“/api/user/login”,,或在url后面添加“/api”
配置中的地址与请求地址中匹配的字符越少,符合度越低
上例中配置中的地址(/)与请求地址(/api)只有一个字符是匹配的,所以符合度低。注意:这只会在开发环境中生效,打包后的代码并不会使用代理设置。如果需要在生产环境中使用代理,可以考虑在服务器端进行配置。
3 后端服务器配置代理
在vite.config.ts 配置的代理服务器,在本地启动起来是可以的并且不会有跨域问题,放在服务器上代理就失效了,就需要配置代理服务器nginx。
Nginx ("engine x")是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx.的并发能力确实在同类型的网页服务器中表现较好Nginx,专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负载的考验,有报告表明能支持高达50,000个并发连接数。
server {
listen 8089; #监听的端口号
server_name localhost; #浏览器通过访问这个地址和端口就能请求到nginx
location / {
proxy_pass http://127.0.0.1:5173/; #这个为前端项目的访问地址
#root html;
#index index.html index.htm;
}
location /api/ {
#前端向后端发出地址请求http://localhost:8089/api/user/login
#就会将地址替换成 http://localhost:8050/user/login
proxy_pass http://localhost:8050/;
}
————————————————