调用AWS API Gateway出现origin 'null'被CORS策略拦截错误如何解决？

解决方案与排查步骤 #

• 修正前端代码问题
  你的代码存在两处错误：
  1. xApiKey : "api-key"行末尾缺少逗号，导致ajax配置解析失败
  2. jQuery ajax无法直接识别xApiKey参数，需要将API密钥放到headers配置块中，修正后的请求代码如下：

  $.ajax({
      type : "POST",
      contentType : "application/json",
      headers: {
          "x-api-key": "api-key"
      },
      url : "api-gateway-url",
      data : JSON.stringify(finalJson),
      dataType : 'json',
      timeout : 100000,
      success : function(data){
          alert('Congrats! You got the response');
          console.log(data);
      },
      error : function(data){
          alert('Error');
          console.log(data);
      }
  });
  

• 确认API Gateway配置生效
  在API Gateway控制台开启CORS后，必须点击部署API将配置同步到生效环境，否则修改不会生效。同时检查OPTIONS预检请求的配置：
  • Access-Control-Allow-Origin需设置为*或包含你的访问源（本地直接打开HTML时源为null）
  • Access-Control-Allow-Headers需添加x-api-key、Content-Type两个允许的头
  • Access-Control-Allow-Methods需包含OPTIONS和POST
• 补充Lambda响应的CORS头
  仅API Gateway层面开启CORS不足以解决问题，POST请求对应的Lambda返回值也必须包含CORS相关响应头，示例返回结构如下（以Python为例，其他语言逻辑一致）：

  import json
  def lambda_handler(event, context):
      # 你的业务逻辑
      return {
          "statusCode": 200,
          "headers": {
              "Access-Control-Allow-Origin": "*",
              "Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token",
              "Access-Control-Allow-Methods": "OPTIONS,POST"
          },
          "body": json.dumps({"code":0, "data":"业务返回数据"})
      }
  

• 本地测试优化
  如果你是直接双击打开HTML文件运行，浏览器会将源标识为null，部分浏览器对null源的CORS校验更严格，你可以用本地临时服务器运行页面：
  进入HTML文件所在目录，执行python -m http.server 8000，之后访问http://localhost:8000/你的文件名.html测试，此时源为http://localhost:8000，更符合实际线上场景。

所有配置修改完成后清理浏览器缓存重新测试即可。

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