node.js - 如何允许 CORS 用于无服务器中的自定义 header ？

Question

这里的核心问题是:“如何在使用无服务器框架处理的 CORS GET 请求中允许自定义 header ？”。如果您知道该问题的答案，请通过 Go，收取 200 美元并请回答该问题。如果不是直接回答的问题，请查看以下详细信息:

我正在使用 AWS Lambda 上的无服务器框架编写一个应用程序(API 通过 AWS API 网关进行管理。坦率地说，我不完全确定这意味着什么或为我提供什么好处，但这就是无服务器自动为我配置的内容).我正在尝试创建一个需要启用 CORS 的开放 API。我正在使用 Lambda 代理集成。我遵循了发现的做法 here .他们给我带来了部分成功。如果我不包含我的自定义 header ，我的应用程序当前已启用 CORS。但是，它仍然不适用于自定义 header 。

当我向我的 API 发送以下请求时:

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = false;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.spongebobify.com/");
xhr.setRequestHeader("text", "hey");


xhr.send(data);

...我收到此错误:

Failed to load https://api.spongebobify.com/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://forum.serverless.com' is therefore not allowed access.

如果我使用 Chrome 开发工具检查“响应 header ”，则会确认此错误消息:响应 header 中没有 Access-Control-Allow-Origin。

但是，如果我发送相同的请求并将 setRequestHeader() 注释掉，它会完美运行(是的，我知道它会返回 403 错误:这是故意的行为)。

这是我认为正在发生的事情。我的服务有两个潜在的 CORS 问题:域相关(请求不是来自原始域)和自定义 header 相关( header 未被 CORS 规范列入安全列表，更多 here )。不知何故，无服务器框架在第二个问题上出错，导致它甚至没有达到发出适当 header 以允许所有 ("*") 域的地步。

这是我的 serverless.yml 配置文件:

# serverless.yml

service: spongebobify

provider:
  name: aws
  runtime: nodejs6.10
  stage: dev
  region: us-east-1

functions:
  app:
    handler: handler.endpoint
    events:
      - http: GET /
        cors:
            origin: '*'
            headers:
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
              - Startlower
              - Text
              - Access-Control-Allow-Headers
              - Access-Control-Allow-Origin
            allowCredentials: false

这是我要运行的函数。您可以看到我多次 尝试正确设置 header 。我有 60% 的信心认为此时可以通过 serverless.yml 文件进行修复。

"use strict";

const spongebobify = require("spongebobify");

module.exports.endpoint = (event, context, callback) => {
  let startLower = event.headers.startlower === "false" ? false : true;
  try {
    const response = {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*", // Required for CORS support to work
        "Access-Control-Allow-Headers": "content-type,origin,text,startlower",
        "Access-Control-Allow-Methods": "GET, OPTIONS",
        "content-type": "text/plain",
        "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS
      },
      body: spongebobify(event.headers.text, startLower)
    };
    callback(null, response);
  } catch (err) {
    console.log(err);
    const response = {
      statusCode: 403,
      headers: {
        "Access-Control-Allow-Origin": "*", // Required for CORS support to work
        "Access-Control-Allow-Headers": "content-type,origin,X-text,startlower",
        "Access-Control-Allow-Methods": "GET, OPTIONS",
        "content-type": "text/plain",
        "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS
      },
      body: "Malformed request."
    };
    callback(null, response);
  }
};

您可以在以下站点的开发控制台中通过运行上述 XMLHttpRequest 来复制我的问题:

1. api.spongebobify.com 启用或禁用自定义 header 。它在这两种情况下都能完美运行(因为它不会跨源)。
2. 任何未正确配置 CSP 并启用自定义 header 的网站。 OPTIONS 请求将失败，它会准确报告没有 Access-Control-Allow-Origin header
3. 任何没有正确配置 CSP 的站点， 都启用了自定义 header 。 OPTIONS 请求将通过(您会知道，因为 Chrome 永远不会告诉您它发生了)并且您将在响应 header 中看到 Access-Control-Allow-Origin。您还将看到响应“格式错误的请求”。

Answer 1

我认为问题在于您将 HTTP 事件的短格式 (- http: GET/) 与添加了额外选项的长格式混合在一起。

尝试使用这个:

functions:
  app:
    handler: handler.endpoint
    events:
      - http: 
          method: GET 
          path: /
          cors:
            origin: '*'
            headers:
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
              - Startlower
              - Text
              - Access-Control-Allow-Headers
              - Access-Control-Allow-Origin
            allowCredentials: false

主要变化是:

1) 在http 事件对象上添加method 和path 键，以及

2) 将 cors 对象缩进另一个级别。它以前位于 http 事件的顶层。

如果这有帮助，请告诉我:)