在http-proxy-middleware的setupProxy.js中反应导入环境，生成意外标识符

Question

我需要使用craco获取的变量在react中设置代理http-proxy-middleware的目标。 我已按照本指南进行操作，以针对不同的环境提供更多的配置文件。 我有3个文件，craco使用不同的npm run startlocal，startdevelopment选择了local.js，development.js和production.js。

在package.json中，我有：

 "scripts": {
        "startlocal": "cross-env CLIENT_ENV=local craco start",
        "startdevelopment": "cross-env CLIENT_ENV=development craco start",
        "startproduction": "cross-env CLIENT_ENV=production craco start",

问题是我想改变代理在我什么样的环境等功能使用HTTP代理中间件我用setupProxy.js按规定指导 。 如果我从“环境”插入导入环境； 在setupProxy.js中，我有错误意外标识符。

这是setupProxy.js的代码：

 import environment from 'environment';
    const proxy = require('http-proxy-middleware');

    module.exports = function(app) {
      app.use(proxy('/api', { target: 'http://localhost:5000/' }));
    };

    this my craco.config.js

    const path = require('path');    

    module.exports = function({ env, paths }) {    
      return {    
        webpack: {   
          alias: {    
            environment: path.join(__dirname, 'src', 'environments',     process.env.CLIENT_ENV)    
          }    
        },    
      };    
    };     

npm的控制台输出运行startlocal

意外的识别码
npm ERR！ 代码ELIFECYCLE
npm ERR！ errno 1
npm ERR！ seltirmedfront_candidati@0.1.0 startlocal： cross-env CLIENT_ENV=local craco start
npm ERR！ 退出状态1
npm ERR！
npm ERR！ 在seltirmedfront_candidati@0.1.0 startlocal脚本上失败。
npm ERR！ npm可能不是问题。 上面可能还有其他日志记录输出。

我认为问题与以下事实有关：setupProxy.js是自动加载的，并且在craco.config.js之前加载，因此它没有该导入。

Answer 1

您不需要setupProxy.js和http-proxy-middleware 。

只需将代理添加到您当前的craco.config.js ：

module.exports = {
...
    devServer: {
        proxy: {
            '/api': 'http://localhost:5000'
        }
    }
};

有关devServer设置的更多信息： https ://webpack.js.org/configuration/dev-server/#devserverproxy