React应用S3部署后反向代理非首页路由失效问题解决

你的问题出在React单页应用（SPA）的前端路由特性上：当直接访问非首页路由（比如/about）时，S3存储桶里并没有对应的about.html文件，而你的代理只对根路径/做了index.html的转发处理，导致其他路由请求返回404。

解决方案思路 #

所有非静态资源的请求都需要转发到index.html，让React的前端路由来接管路径解析；静态资源（如.js、.css、图片等）则正常代理到S3对应的文件。

修改后的代码 #

const express = require('express')
const httpProxy = require('http-proxy')
const AWS = require("aws-sdk");
const path = require('path');

const s3 = new AWS.S3({
    region: '',
    credentials: {
        accessKeyId: '',
        secretAccessKey: ''
    }
})

const app = express()
const PORT = 8000

const BASE_PATH = 'https://s3.com/__outputs'

const proxy = httpProxy.createProxy()

// 匹配常见静态资源后缀的正则
const staticAssetRegex = /\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$/i;

app.use("/*", async (req, res) => {
    const hostname = req.hostname;
    const subdomain = hostname.split('.')[0];

    const resolvesTo = `${BASE_PATH}/${subdomain}`

    return proxy.web(req, res, {
        target: resolvesTo,
        changeOrigin: true
    })
})

proxy.on('proxyReq', async (proxyReq, req, res) => {
    const url = req.url;

    // 如果不是静态资源请求，就重写路径到index.html
    if (!staticAssetRegex.test(url)) {
        proxyReq.path = '/index.html';
    }
    // 根路径统一处理（可选，上方规则已覆盖）
    else if (url === '/') {
        proxyReq.path += 'index.html';
    }
})

app.listen(PORT, () => console.log(`Reverse Proxy Running..${PORT}`))

关键改动说明 #

• 新增staticAssetRegex正则，匹配常见的静态资源后缀，确保这类请求正常代理到S3的对应文件
• 修改proxyReq事件逻辑：只要请求不是静态资源，就把路径重写为/index.html，让React应用接管路由解析
• 这样无论是直接访问/about还是其他路由，都会返回React的入口文件，前端路由就能正确渲染对应页面

内容的提问来源于stack exchange，提问作者Divyansh Singh