Typescript setupProxy.js 带有自定义 webPack 配置

Question

我必须在 typescript React 应用程序的 setupProxy.js 中将 header Access-Control-Allow-Origin设置为* 。 但我不能。 我不确定是否支持 typescript 中的 setupProxy.js (ts)。

但我需要它用于微前端应用程序。

这是我的自定义 webpack 配置（使用 react-app-rewired）

module.exports = {
    webpack: (config, env) => {
      config.optimization.runtimeChunk = false;
      config.optimization.splitChunks = {
        cacheGroups: {
          default: false,
        },
      };
  
      config.output.filename = "static/js/[name].js";
  
      config.plugins[5].options.filename = "static/css/[name].css";
      config.plugins[5].options.moduleFilename = () => "static/css/main.css";
      return config;
    },
  };

这是我的 src/setupProxy.js

module.exports = (app) => {
    app.use((req, res, next) => {
      res.header("Access-Control-Allow-Origin", "*");
      next();
    });
  };

还有我的 npm 脚本

"scripts": {
    "start": "PORT=3031 react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

如果有另一种方法来实现我想要的，那就太棒了。

Answer 1

我的错，我使用 CRA 创建了 react 应用程序，然后添加了 TS，正确的方法是使用npx create-react-app my-app --template typescript