如何在React中展示后端静态文件？直接访问静态路由异常怎么解决

问题根因 #

• 你在React项目package.json中配置的代理规则，仅作用于React应用内部发起的网络请求。浏览器地址栏直接输入URL时，请求会直接发送到React开发服务器，默认优先匹配前端路由/返回React入口HTML文件，不会触发代理转发到Express后端。
• 你看到的空白页面实际上就是React的入口HTML文件，因为没有匹配到对应前端路由，所以没有内容渲染。
• 补充：你的Express当前配置是将/images路径映射到后端public目录，所以正确的后端原生资源地址为http://localhost:5000/images/image.png，你提到的http://localhost:5000/public/image.png可访问，说明你后端public目录下还有一层同名public子目录，属于路径巧合。

解决方案 #

开发环境临时访问 #

直接访问后端服务对应的资源地址即可：
http://localhost:5000/images/image.png

配置前端开发服务器支持地址栏直接访问静态资源 #

使用更精细的代理规则配置，让所有/images开头的请求全部转发到Express后端：

1. 先安装代理依赖：
   npm install http-proxy-middleware --save
2. 在React项目根目录新建setupProxy.js文件，写入以下内容：

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

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

3. 重启React开发服务，此时直接在地址栏输入https://localhost/images/image.png即可正常访问图片。

生产环境部署注意事项 #

生产环境不存在package.json代理配置，需要配置Nginx等反向代理服务，将/images开头的请求转发到Express服务，其余请求返回React打包后的静态文件即可。

内容的提问来源于stack exchange，提问作者Michael Haydn