CloudFront不遵循Behavior路径路由到指定Origins的CDK配置问题

核心问题根因 #

你遇到的不稳定现象本质是缓存内容串号，由两个配置错误共同导致：

1. 路径重写函数绑定在了VIEWER_REQUEST阶段，该阶段在CloudFront缓存检查之前执行，修改request.uri会直接改变缓存键
2. 多个源的重写后路径重叠，比如/app/login和官网根路径的/login共享同一个缓存键/login，后触发的请求会直接命中前一次请求的缓存内容，看起来就像是行为匹配规则失效

其他配置错误 #

• GraphQL行为仅允许GET/HEAD方法，无法处理常规GraphQL POST请求
• 路径重写正则无法匹配无尾部斜杠的/app、/graphql请求，会导致源站返回404
• GraphQL路径规则仅匹配精确的/graphql路径，无法适配后续可能的/graphql/xxx子路径

修复方案 #

1. 修改重写函数绑定阶段 #

将重写函数的触发阶段从VIEWER_REQUEST改为ORIGIN_REQUEST，该阶段在缓存检查通过后、回源之前执行，修改路径仅影响回源请求，不会改变缓存键，从根源避免不同源的缓存串号。

2. 修正重写函数逻辑 #

调整正则适配无尾部斜杠的路径：

/* eslint-disable */
function handler(event) {
    var request = event.request;
    // 匹配 /app、/app/xxx、/graphql、/graphql/xxx 格式路径
    request.uri = request.uri.replace(/^\/(app|graphql)(\/|$)/, '/');
    return request;
}

3. 修正CDK配置 #

• 调整GraphQL行为的允许方法，支持POST请求
• 补充GraphQL路径的通配符规则
• （可选）将旧的CloudFrontWebDistribution替换为当前推荐的Distribution构造
  修正后的核心配置片段：

// GraphQL 行为配置
behaviors: [{
    pathPattern: 'graphql*', // 匹配 /graphql 和 /graphql/xxx
    defaultTtl: Duration.seconds(0),
    minTtl: Duration.seconds(0),
    maxTtl: Duration.seconds(0),
    compress: true,
    allowedMethods: CloudFrontAllowedMethods.ALL, // 支持POST请求
    forwardedValues: {
        queryString: true,
        cookies: { forward: 'all' },
    },
    functionAssociations: [{
        function: rewriteFunction,
        eventType: FunctionEventType.ORIGIN_REQUEST, // 修改为源请求阶段
    }],
}],
// App 行为配置
behaviors: [{
    pathPattern: 'app/*',
    compress: true,
    allowedMethods: CloudFrontAllowedMethods.GET_HEAD,
    forwardedValues: {
        queryString: true,
        cookies: { forward: 'all' },
    },
    functionAssociations: [{
        function: rewriteFunction,
        eventType: FunctionEventType.ORIGIN_REQUEST, // 修改为源请求阶段
    }],
}],

4. 可选优化 #

如果你的App SPA需要支持客户端路由刷新，需要为App源配置自定义错误响应，将404、403错误重定向到index.html，状态码改为200。

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