craco配置devServer.proxy|焦点精选
腾讯云 2023-03-18 07:06:58
【资料图】
前端浏览器环境直接访问后端接口，出于对用户数据的保护，非同源会有跨域问题。
在本地开发联调时，借助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.jsmodule.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", },}
