(资料图片仅供参考)
前端浏览器环境直接访问后端接口,出于对用户数据的保护,非同源会有跨域问题。
在本地开发联调时,借助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", },}
关键词: