使用路径路由访问S3中Angular应用时遭遇403访问拒绝问题

1. 修复S3存储桶策略的无效ARN #

你的存储桶策略中，第二个Resource项存在空格，会导致ARN格式无效：

"arn:aws:s3::: <my-bucket>/myApp/*"

而且默认的arn:aws:s3:::<my-bucket>/*已经覆盖了桶内所有路径（包括myApp/下的所有文件），无需额外添加重复规则。修正后的策略如下：

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<my-bucket>/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<numbers>:distribution/<id>"
                }
            }
        }
    ]
}

2. 处理CloudFront路径匹配覆盖问题 #

当前仅配置了myApp/*的行为，但用户访问mydomain.com/myApp（不带尾斜杠）时，该路径不会匹配myApp/*规则，会走默认行为（指向根网站桶），而根桶中无myApp对象，因此返回403。解决方法二选一：

• 新增精确路径行为：添加一个路径模式为myApp的行为，源指向Angular应用的S3桶，其余配置与myApp/*行为保持一致。
• 配置路径重定向：使用CloudFront函数或Lambda@Edge，将/myApp重定向到/myApp/，确保请求进入myApp/*的行为规则。

3. 正确配置CloudFront源的Origin Path #

如果Angular构建文件存放在S3桶的myApp/目录下，需为Angular应用对应的CloudFront源设置Origin Path = /myApp。这样用户访问mydomain.com/myApp/main.js时，CloudFront会自动向S3请求myApp/main.js，避免因路径不匹配找不到文件。

4. 配置CloudFront错误页面适配Angular单页应用 #

Angular是单页应用，刷新页面或直接访问子路由时，CloudFront会尝试请求不存在的文件（如/myApp/dashboard），导致403/404错误。需在CloudFront分发的错误页面配置中：

• 添加错误代码404和403，设置响应页面路径为/index.html，HTTP状态码设为200。
• 确保该配置应用到myApp/*的行为上。

5. 验证S3对象所有权与OAC配置 #

• 确保Angular应用S3桶中的所有对象由桶所有者拥有（若对象由其他账号上传，需开启Bucket owner preferred权限设置）。
• 确认OAC已正确关联到你的CloudFront分发，且OAC配置允许访问该S3桶。

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