如何配置React Proxy强制代理含Accept:text/html的指定端点？

Create React App 自带的简单 proxy 配置确实会跳过带有 Accept: text/html 头的请求，但我们可以通过手动配置代理中间件来绕过这个限制，让指定端点的所有请求（不管请求头是什么）都被代理。

具体步骤如下：

1. 在你的项目 src 目录下创建一个名为 setupProxy.js 的文件（CRA 会自动识别这个文件，不需要额外配置）。
2. 在这个文件里使用 http-proxy-middleware（CRA 已经内置了这个库，无需额外安装）来配置针对指定端点的代理规则。

示例代码如下：

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

module.exports = function(app) {
  // 针对 /api/registration/confirmation 端点配置代理
  app.use(
    '/api/registration/confirmation',
    createProxyMiddleware({
      target: 'https://your-target-api-domain.com', // 替换成你的实际代理目标地址
      changeOrigin: true,
      followRedirects: true, // 确保重定向请求也能被正确代理
      // 如果需要调整请求头或其他行为，可以在这里添加逻辑
      onProxyReq: (proxyReq, req, res) => {
        // 比如你可以在这里保留或修改请求头，默认会传递所有请求头
        // 不需要额外处理 Accept 头，因为我们已经绕过了 CRA 的默认过滤规则
      }
    })
  );
};

为什么这个方法有效？ #

CRA 的默认 proxy 配置是基于 http-proxy-middleware 做的封装，但加上了自己的过滤逻辑——自动跳过 Accept: text/html 的请求。而手动创建 setupProxy.js 直接使用底层的代理中间件，完全由我们自己控制代理规则，不受 CRA 默认过滤逻辑的限制。

这样配置后，所有发往 /api/registration/confirmation 的请求，不管请求头里有没有 Accept: text/html，都会被正确代理到目标服务器，包括你提到的那个无法控制的重定向请求。

内容的提问来源于stack exchange，提问作者Sean Nguyen