React Config-Overrides 正式环境跨域问题解决方案

在使用 React 开发过程中，我们经常会遇到跨域问题，特别是在正式环境中。本文将介绍如何使用 config-overrides.js 文件配置代理，解决 React 项目在正式环境下的跨域问题。

步骤一：配置代理

在 config-overrides.js 文件中，使用 http-proxy-middleware 库添加代理配置。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api.example.com', // 将此处替换为你的后端接口地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', // 如果你的后端接口没有/api前缀，可以将此处置空
      },
    })
  );
};

步骤二：安装依赖

确保你的 React 应用已经安装了 http-proxy-middleware 库，如果没有，请使用以下命令安装：

npm install http-proxy-middleware

步骤三：重启应用

完成以上步骤后，重新启动你的 React 应用，代理配置将会自动生效。

注意：

以上解决方案适用于使用 create-react-app 脚手架创建的 React 应用，并使用 config-overrides.js 文件覆盖默认配置。
如果你的项目不符合上述条件，你可能需要根据具体情况调整解决方案。

希望本文能够帮助你解决 React 项目在正式环境下的跨域问题。如有任何疑问，欢迎留言讨论。