CloudFront+Lambda@Edge部署Angular应用直接访问路由报403错误

直接访问Angular路由（比如/account/login）出现403，核心原因是：viewer-request阶段的Lambda@Edge先处理了请求，导致CloudFront配置的403错误重定向逻辑被跳过。当请求路由到S3时，S3找不到对应路径的文件（Angular是单页应用，仅存在index.html等静态文件），直接返回403，而CloudFront的错误重定向没机会触发。

解决办法：在Lambda@Edge中提前处理SPA路由重写 #

修改viewer-request阶段的Lambda函数，在随机路由到S3之前，先判断请求路径是否为实际存在的静态文件（带后缀，比如.js/.css/.png等），如果是Angular的路由路径（无后缀且不是根路径），就把请求路径重写为/index.html，再路由到S3桶。

示例Node.js代码：

exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;

    // 非文件路径且非根路径，重写为index.html
    if (!uri.includes('.') && uri !== '/') {
        request.uri = '/index.html';
    }

    // 原有随机路由逻辑
    const targetBuckets = ['bucket-1-name.s3.amazonaws.com', 'bucket-2-name.s3.amazonaws.com'];
    const selectedBucket = targetBuckets[Math.floor(Math.random() * targetBuckets.length)];
    request.origin.s3.domainName = selectedBucket;
    request.headers['host'] = [{ key: 'Host', value: selectedBucket }];

    return request;
};

额外注意事项 #

• 确保Lambda@Edge函数部署在us-east-1区域，更新CloudFront行为关联修改后的Lambda版本。
• 验证S3桶的权限：CloudFront的OAC（或OAI）必须拥有桶内所有文件的读取权限，避免因权限问题导致的403。
• 无需保留CloudFront的403重定向配置，因为Lambda已经提前处理了路径，不会触发S3的403返回。

内容的提问来源于stack exchange，提问作者Stéphane GRILLON