craco配置devServer.proxy

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

在本地开发联调时，借助webpack dev server启动的Node服务来代理转发请求，可以解决这个问题。

在使用 craco（Create React App Configuration Override）创建的React项目中配置devServer.porxy只需要修改craco.config.js即可，如下：

代码语言：javascript复制

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，如下

代码语言：javascript复制

// 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传参数来快速启动各个环境，而不用在切换时去修改这些值了，命令如下：

代码语言：javascript复制

{
    "scripts": {
        "start": "craco start",
        "sandbox": "env DATA_ENV='sandbox' craco start",
        "online": "env DATA_ENV='online' craco start",
    },
}

react 网络安全

0 人点赞