logo头像

求知若渴,虚心若愚

浏览器 - 跨域解决方案 - 服务器代理(Server Proxy)

服务器代理(Server Proxy)

跨域是因为浏览器的限制,在服务端是不存在跨域的

原理

  • 服务器代理,顾名思义,当你需要有跨域的请求操作时发送请求给后端

  • 让后端帮你代为请求,然后最后将获取的结果发送给你

后端逻辑实现(NodeJs)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const url = require('url');
const http = require('http');
const https = require('https');
// 我们请求的是http://www.xuefeng666.com/api/newsList
const server = http.createServer((req, res) => {
const path = url.parse(req.url).path.slice(1);
if(path === 'newsList') {
// 服务器去另一个域名帮我们请求数据,进行转发
https.get('http://www.xuefeng66.com/api/newsList', (resp) => {
let data = "";
resp.on('data', chunk => {
data += chunk;
});
resp.on('end', () => {
res.writeHead(200, {
'Content-Type': 'application/json; charset=utf-8'
});
// 将代为请求的数据返回给我们
res.end(data);
});
})
}
}).listen(3000, '127.0.0.1');

console.log('启动服务,监听 127.0.0.1:3000');

webpack配置代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

proxyTable: {
'/api': { //代理地址
target: 'http://1.1.1.1:8000/', //需要代理的地址
changeOrigin: true, //是否跨域
secure: false,
pathRewrite: {
'^/api': '/' //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉
}
}
}

// 发送请求
// 请求数据时URL前加上“/api”就可以跨域请求了
this.$axios.get('/api/queryRole', {params: params})
.then((res) => {
// 成功
console.log(res);
}).catch((err) => {
// 失败
console.log(err);
})

TIP
webpack配置代理只是开发环境可以使用

线上环境一般是nginx配置代理,或者是服务器代码中添加api转发之类的功能

支付宝打赏 微信打赏

赞赏是对我们的肯定!