带有自定义 webPack 配置的打字稿 setupProxy.js答案

【问题标题】：Typescript setupProxy.js whit custom webPack config带有自定义 webPack 配置的打字稿 setupProxy.js
【发布时间】：2021-06-01 12:42:04
【问题描述】：

我必须在 typescript React 应用程序的 setupProxy.js 中将标题 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"
  },

如果有其他方法可以实现我想要的，那就太棒了。

【问题讨论】：

标签： javascript reactjs typescript proxy micro-frontend

【解决方案1】：

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

【讨论】：