React单页应用S3托管：如何将404请求重定向至根路径/？

哈哈，这个问题我踩过好几次坑！React单页应用在S3上托管时，前端路由的404问题确实很头疼——毕竟S3是静态文件存储，它只会找对应路径的文件，根本不知道什么是React Router。不过别担心，我给你一套亲测有效的配置方案：

首先确认你已经完成了基础配置：存储桶开启静态网站托管，索引文档设为index.html（你能访问根路径说明这步已经搞定了）。接下来重点就是配置重定向规则，让所有404请求都转到根路径，同时保持原URL不变，让React路由接管。

正确的重定向规则配置 #

在S3控制台的「静态网站托管」页面，找到「重定向规则」区域，填入以下JSON代码：

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "404"
        },
        "Redirect": {
            "HostName": "my-bucket.s3-website-us-east-1.amazonaws.com",
            "ReplaceKeyPrefixWith": "/",
            "HttpRedirectCode": "200"
        }
    }
]

规则细节说明 #

• Condition：匹配S3返回404错误的请求（也就是请求的路径没有对应的静态文件）
• HostName：填你的S3网站端点域名，如果你用了自定义域名，就换成自定义域名
• ReplaceKeyPrefixWith: 设置为/，因为你的索引文档是index.html，S3会自动把根路径请求指向它
• HttpRedirectCode: 一定要用200而不是302！用200的话，S3会内部返回index.html的内容，浏览器地址栏的URL不会变，React Router就能正常解析路由；如果用302，浏览器会直接跳转到根路径，路由就失效了。

配置完保存后，再测试一下直接访问比如http://my-bucket.s3-website-us-east-1.amazonaws.com/about这种前端路由路径，应该就能正常渲染对应的页面了！

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