如何让Lambda Function URL的POST请求解决CORS问题？

问题描述 #

• 浏览器通过AJAX请求AWS Lambda Function URL时触发CORS错误，错误信息：

  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://somethingsomething.lambda-url.us-east-2.on.aws/authnz/subscribe. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

• 已配置Lambda Function URL的CORS规则，但使用jQuery发起POST请求仍报错
• jQuery请求代码：

$.ajax({
      url: remoteUrl,
      type: "POST",
      contentType: "application/json",
      headers: {
        "Authorization": "Bearer "+token
      },
      data:  {"a":"aa"},
      success: function(response) {
         
        console.log(response);
      },
      error: function(xhr) {
        
        $("#form_save_message").show();
      }
    });
  });

• 浏览器发起OPTIONS预检请求时，Lambda处理器无日志输出，在Java handler中添加请求头无效
• 后端为Java编写的Lambda，代码如下：

public class RegistrationApplication implements RequestHandler<Map<String, Object>, Map<String, Object>> {
     

    @Override
    public Map<String, Object> handleRequest(Map<String, Object> requestParams, Context context) {
        Map<String,Object> lambdaResponse = new HashMap<>();
        return lambdaResponse;
    }
}

• 疑问：仅使用Lambda Function URL是否可行？是否必须依赖API Gateway？

解决方案 #

1. 修正Lambda Function URL的CORS配置
   你的CORS配置未覆盖请求的必要规则，需做以下调整：

   • 确保Allowed origins设置为前端实际域名（如https://your-frontend.com），测试环境可临时用*（生产不建议）
   • 因为请求带了Authorization自定义头，必须在Allowed headers中明确添加Authorization和Content-Type
   • Allowed methods需同时勾选OPTIONS和POST
   • 如果请求包含凭证类信息，开启Allow credentials选项

2. 关于OPTIONS请求无日志的说明
   Lambda Function URL会自动处理OPTIONS预检请求，不会转发到Lambda函数，所以handler中看不到OPTIONS请求的日志是正常行为。浏览器报错的原因是自动返回的OPTIONS响应缺少必要CORS头，和Lambda代码无关。

3. 无需依赖API Gateway
   Lambda Function URL本身完全支持CORS配置，不需要额外使用API Gateway，问题出在CORS规则配置不匹配请求要求，而非缺少网关服务。

4. Java Lambda响应头补充
   虽然OPTIONS请求由URL自动处理，但POST响应仍需携带CORS头，修改Java handler代码如下：

   @Override
   public Map<String, Object> handleRequest(Map<String, Object> requestParams, Context context) {
       Map<String,Object> lambdaResponse = new HashMap<>();
       // 设置响应内容
       lambdaResponse.put("body", "处理完成");
       // 添加CORS响应头
       Map<String, String> headers = new HashMap<>();
       headers.put("Access-Control-Allow-Origin", "https://your-frontend.com"); // 替换为实际前端域名
       headers.put("Access-Control-Allow-Headers", "Authorization,Content-Type");
       lambdaResponse.put("headers", headers);
       // 设置状态码
       lambdaResponse.put("statusCode", 200);
       return lambdaResponse;
   }
   

5. 排查验证步骤

   • 用浏览器开发者工具查看OPTIONS请求的响应头，确认是否包含Access-Control-Allow-Origin、Access-Control-Allow-Headers（含Authorization）、Access-Control-Allow-Methods
   • 登录AWS控制台，进入对应Lambda函数的Configuration -> Function URL，编辑CORS配置并保存，重新测试请求

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