craco配置devServer.proxy
craco配置devServer.proxy
lonelydawn
发布于 2023-03-11 11:23:46
发布于 2023-03-11 11:23:46
前端浏览器环境直接访问后端接口，出于对用户数据的保护，非同源会有跨域问题。
在本地开发联调时，借助webpack dev server启动的Node服务来代理转发请求，可以解决这个问题。
在使用 craco（Create React App Configuration Override）创建的React项目中配置devServer.porxy只需要修改craco.config.js即可，如下：
const devProxyConfig = require('./devProxyConfig');
module.exports = {
webpack: {},
babel: {},
plugins: {},
devServer: {
proxy: {
'/api': {
target: devProxyConfig.getTarget(DATA_ENV),
changeOrigin: true,
onProxyReq(proxyReq) {
// 设置Cookie
proxyReq.setHeader('Cookie', devProxyConfig.getCookie(DATA_ENV));
},
},
},
}
}这里封装了两个方法，getTarget和getCookie，用于判断要联调的环境并返回对应的地址和Cookie，如下
// devProxyConfig.js
module.exports = {
getTarget(env) {
switch (env) {
case 'sandbox':
return 'http://...sandbox.com:8888';
case 'online':
return 'http://online.com';
default:
return 'https://mockup.com';
}
},
getCookie(env) {
switch (env) {
case 'online':
return '...'; // 线上Cookie
default:
return '...'; // 沙盒Cookie
}
},
};这样，我们就可以通过命令向devServer传参数来快速启动各个环境，而不用在切换时去修改这些值了，命令如下：
{
"scripts": {
"start": "craco start",
"sandbox": "env DATA_ENV='sandbox' craco start",
"online": "env DATA_ENV='online' craco start",
},
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-03-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读