React开发模式下代理服务器请求时能否渲染非项目内的外部HTML文件

问题根因 #

你遇到的情况是两个常见的配置冲突导致的：

• React 开发服务器默认会把所有未匹配静态资源的请求都返回 React 主入口的 index.html，交由 React Router 处理路由
• 你当前的代理规则没有优先匹配 /openscad 路径，导致请求没有被转发到 5000 端口的服务端，反而被 React Router 拦截，而你又没有配置对应路由所以没有内容返回

解决方案 #

第一步：调整跳转逻辑 #

不要使用 react-router 提供的 Link 组件做跳转，要触发浏览器原生的页面请求，才会走代理规则：

// 错误写法，会被react-router拦截为前端路由
<Link to="/openscad">打开页面</Link>

// 正确写法1：原生a标签
<a href="/openscad">打开页面</a>

// 正确写法2：按钮点击触发原生跳转
<button onClick={() => window.location.href = '/openscad'}>打开页面</button>

第二步：配置精准的开发代理 #

如果是 Create React App 搭建的项目，优先使用 setupProxy.js 配置规则，优先级高于 package.json 中的代理配置：

1. 先安装依赖：

npm install http-proxy-middleware --save-dev

2. 在项目 src 目录下新建 setupProxy.js 文件，写入以下内容：

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

module.exports = function(app) {
  app.use(
    '/openscad',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

第三步：重启开发服务 #

修改代理配置后必须重启 React 开发服务（即停掉当前的 npm start 进程重新执行命令），配置才会生效。
重启后访问 localhost:3000/openscad 就会正常返回服务端的 html 文件。

内容的提问来源于stack exchange，提问作者Lucas Miyazaki