AWS S3+CloudFront部署VueJS网站刷新/回退报错求助

1. 修复CloudFront自定义错误响应（核心解决SPA刷新问题） #

• 登录CloudFront控制台，找到你的分发，切换到错误页面标签
• 添加两个自定义错误规则（针对403和404）：
  • 对于HTTP错误代码 403 Forbidden：
    • 勾选"自定义错误响应"
    • 响应页面路径填写 /index.html
    • HTTP响应代码选择 200 OK（不要选3xx重定向）
  • 重复上述步骤添加HTTP错误代码 404 Not Found的规则
• 保存更改，等待CloudFront分发部署完成（通常需要10-15分钟）

2. 修正S3存储桶策略的Resource字段 #

确保策略中的Resource指向存储桶下的所有对象，而不是存储桶本身：

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::你的存储桶名称/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::你的AWS账号ID:distribution/你的CloudFront分发ID"
                }
            }
        }
    ]
}

3. 验证S3静态资源的MIME类型 #

• 登录S3控制台，进入你的存储桶，检查静态资源（如.js、.css等文件）的Content-Type：
  • .js文件应为 application/javascript
  • .css文件应为 text/css
  • .html文件应为 text/html
• 如果MIME类型错误，可通过aws s3 sync添加--content-type参数批量修正，或手动修改单个文件的属性

关于之前重定向导致的MIME错误原因 #

当你把403重定向到/index.html时，浏览器收到3xx响应后会重新请求/index.html，但如果原请求是针对静态资源（比如/js/chunk-vendors.js），CloudFront返回的index.html的MIME类型是text/html，与浏览器期望的application/javascript不符，因此触发MIME类型校验错误。使用200 OK响应转发则不会改变请求URL，CloudFront直接将index.html的内容返回给原请求路径，浏览器会正确解析SPA入口，进而加载对应的静态资源。

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