当前最新:craco配置devServer.proxy

2023-03-17 20:07:20

来源:腾讯云


(资料图片仅供参考)

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

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

关键词: