AWS CloudFront静态站点：Lambda@Edge读取POST请求Body问题咨询

Got it, let's tackle this problem step by step. I've worked through similar Lambda@Edge + CloudFront setups for OAuth redirects before, so here's what you need to know:

一、CloudFront侧的关键配置 #

首先要解决CloudFront默认不会在Viewer Request阶段把请求体传递给Lambda的问题，你需要做以下配置：

• 修改对应路径的CloudFront行为（Behavior）：

  1. 进入该行为的「Cache and origin request settings」，选择或创建一个自定义Origin Request Policy：
     • 在配置里勾选「Include body」，并设置合适的「Body size limit」（Lambda@Edge在Viewer Request阶段最大支持16KB的请求体，设为16384即可）。
     • 同时确保「Forward headers」里包含你后续要添加的自定义请求头（比如X-OAuth-*前缀的头），或者直接选择「AllViewer」（如果不需要严格缓存的话）。
  2. 确认Lambda@Edge的关联：在「Lambda function associations」里，将你的函数关联到「Viewer Request」阶段，触发条件可选择「All events」或指定POST方法。

• Lambda@Edge权限配置：
  确保你的Lambda执行角色的信任关系包含lambda-edge.amazonaws.com，这样CloudFront才能调用它。角色的信任策略示例：

  {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": {
          "Service": [
            "lambda.amazonaws.com",
            "lambda-edge.amazonaws.com"
          ]
        },
        "Action": "sts:AssumeRole"
      }
    ]
  }
  

二、Lambda@Edge代码实现（Node.js示例） #

核心代码逻辑需要注意：请求体在Lambda里是Base64编码的，需解码后处理，再写入请求头：

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

    // 只处理POST请求，其他请求直接放行
    if (method !== 'POST') {
        return request;
    }

    try {
        // 读取并解码请求体（CloudFront传递的body.data是Base64格式）
        const bodyBase64 = request.body.data;
        const decodedBody = Buffer.from(bodyBase64, 'base64').toString('utf-8');

        // 根据你的OAuth回调Body格式解析，这里分两种常见情况：
        // 情况1：JSON格式的Body
        const bodyPayload = JSON.parse(decodedBody);
        // 将需要的字段写入自定义请求头，比如取code或者user_id
        request.headers['x-oauth-code'] = [{
            key: 'X-OAuth-Code',
            value: bodyPayload.code || ''
        }];

        // 情况2：form-urlencoded格式的Body（OAuth回调常用）
        // const querystring = require('querystring');
        // const formData = querystring.parse(decodedBody);
        // request.headers['x-oauth-code'] = [{
        //     key: 'X-OAuth-Code',
        //     value: formData.code || ''
        // }];

    } catch (err) {
        // 处理解析错误，返回400响应
        return {
            status: '400',
            statusDescription: 'Bad Request',
            headers: {
                'content-type': [{ key: 'Content-Type', value: 'text/plain' }]
            },
            body: 'Invalid request body format'
        };
    }

    // 返回修改后的请求，继续转发到源站
    return request;
};

代码注意事项： #

• Viewer Request阶段的Lambda@Edge最多只能处理16KB的请求体，超过这个大小CloudFront会直接拒绝请求，要确保OAuth回调的POST Body在这个范围内。
• 自定义请求头建议用X-前缀，避免和标准HTTP头冲突，CloudFront会自动将头名转为小写存储，但前端读取时可以用大写或驼峰形式（浏览器会自动处理）。

三、静态网站读取请求头的补充配置 #

默认情况下浏览器会限制前端访问自定义响应头，所以需要添加CORS配置来暴露这些头：

可以在CloudFront的「Viewer Response」阶段再关联一个Lambda@Edge函数，添加Access-Control-Expose-Headers头：

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

    // 暴露自定义的OAuth相关头，让前端可以读取
    headers['access-control-expose-headers'] = [{
        key: 'Access-Control-Expose-Headers',
        value: 'X-OAuth-Code'
    }];

    // 如果需要全局CORS配置，也可以在这里添加其他CORS头
    headers['access-control-allow-origin'] = [{
        key: 'Access-Control-Allow-Origin',
        value: '*' // 根据你的需求替换为具体域名
    }];

    return response;
};

这样你的前端JavaScript就可以通过response.headers.get('X-OAuth-Code')获取到对应的值了。

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