Proxy原理
增加一层中间服务器(中间件),帮忙发送请求和接收返回。
跨域的产生:详细的就不写了,就单纯写为什么下面的案例会跨域,假如 3001端口请求3000端口段都的资源,就会产生跨域。跨域的产生是浏览器的问题(安全策略),所以,配置proxy也必然是针对浏览器的。
配置proxy就能解决,是因为,增加一层 中间服务器,把请求发给中间服务器,服务器帮你发给 3000端口,当接收到3000端口返回数据后,中间服务器再帮发给3000端口。
// webpack.config.js
module.exports = {
// ...
devServer: {
// ...
proxy: {
// 代理路径匹配规则
"/api": {
// 代理的目标地址
target: "http://localhost:3000",
// 是否修改host头部
changeOrigin: true,
// 路径重写,将API请求重定向到代理路径的根路径下
pathRewrite: { "^/api": "" }
}
}
}
}
解决跨域的方法:
1、客户端配置 proxy
webpack: 就是上面的。
Umi: .umirc.ts
或 .umirc.js
文件中添加 proxy
配置项 。跟webpack的一样
Vite: 在Vite的配置文件(vite.config.js)中添加以下代码:
export default {
server: {
proxy: {
// 将指定路径的请求代理到目标地址,并添加跨域请求头
// 请求路径是 "/api",代理到 "http://localhost:3000"
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': '*'
},
},
},
},
};
2、 服务器端配置
返回的数据头增加 'Access-Control-Allow-Origin': '*'
devServer: {
// ...
headers: {
'Access-Control-Allow-Origin': '*'
}
}