AWS CloudFront用URL重写函数时出现503 FunctionThrottledError问题

一、CloudFront 503 FunctionThrottledError 原因排查（排除配额后） #

• 函数部署与分发关联的时序问题
  虽然Terraform中设置了publish = true，但CloudFront函数发布后需要同步到全球边缘节点，这个过程通常需要几分钟。如果在函数未完成边缘部署时就关联到CloudFront分发，会导致边缘节点无法找到有效函数版本，触发类似限流的错误（表现为FunctionThrottledError）。

• 函数代码的回调方式兼容性问题
  CloudFront JS 1.0 runtime推荐使用同步返回请求对象的写法，而非传统的callback回调模式。旧的callback写法可能在部分边缘节点环境中触发异常，导致函数执行失败，进而被标记为限流类错误。

• 函数关联配置的隐性错误
  检查CloudFront分发的function_association是否绑定了发布后的函数ARN：Terraform的aws_cloudfront_function.our_spa.arn默认返回发布后的版本ARN，但如果函数创建后有过修改且未重新发布，可能存在ARN不匹配的情况。

二、修复当前CloudFront函数方案 #

1. 修正函数代码（适配runtime规范） #

将原函数改为同步返回的写法，同时添加静态资源过滤逻辑（避免重写js/css/img等资源路径）：

exports.handler = (event) => {
    const request = event.request;
    // 仅重写无扩展名的路径（SPA路由路径）
    if (!request.uri.match(/\.[a-zA-Z0-9]+$/)) {
        request.uri = '/';
    }
    return request;
};

2. 确保函数部署完成后再关联分发 #

在Terraform中可通过添加显式依赖或手动确认：等待CloudFront函数状态显示为“已发布”后，再更新CloudFront分发配置。

三、更优的SPA部署方案 #

方案1：S3静态网站托管+CloudFront缓存策略（无需函数） #

• 在S3桶的静态网站托管设置中，将错误文档配置为index.html。
• 在CloudFront分发中配置缓存行为：
  • 对*.js、*.css、*.png等静态资源设置较长缓存时间（如1年）。
  • 对根路径/和无扩展名的路径设置短缓存时间（如0秒），避免前端路由页面被缓存。
• 原理：请求不存在的路径时，S3返回index.html，由前端路由接管路径解析。

方案2：Lambda@Edge（适合复杂路由场景） #

如果需要多环境路由、A/B测试等复杂逻辑，可使用Lambda@Edge在viewer-request阶段处理：

exports.handler = (event, context, callback) => {
    const request = event.request;
    const uri = request.uri;
    
    // 排除静态资源，重写SPA路由路径到index.html
    if (!uri.includes('.') && uri !== '/') {
        request.uri = '/index.html';
    }
    
    callback(null, request);
};

将此Lambda部署到us-east-1区域，再关联到CloudFront分发的viewer-request事件。

方案3：CloudFront函数优化版（轻量场景首选） #

使用前面修正后的CloudFront函数，仅重写非静态资源路径，既解决SPA路由问题，又不影响静态资源的缓存加载，是轻量场景下最经济的方案。

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