(资料图片仅供参考)

前端浏览器环境直接访问后端接口，出于对用户数据的保护，非同源会有跨域问题。

在本地开发联调时，借助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",    },}

关键词：