如何在无服务器中允许CORS用于自定义标头？

Question

这里的核心问题是:" 如何在使用无服务器框架处理的CORS GET请求中允许自定义标头？ ".如果您知道答案,请通过Go,收取200美元并回答该问题.如果这不是一个直接答案的问题,这里有详细信息:

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

当我向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开发工具检查"响应标头",则会确认此错误消息:响应标头中没有Access-Control-Allow-Origin.

但是,如果我发送相同的请求与setRequestHeader()注释掉,它完美地工作(是的,我知道它返回403错误:这是故意行为).

这就是我认为正在发生的事情.我的服务有两个潜在的CORS问题:域相关(请求不来自原始域)和自定义头相关(CORS规范未安全列出的头,更多这里).不知何故,无服务器框架在第二个问题上绊倒,导致它甚至没有达到它发出适当的头以允许所有("*")域的程度.

这是我的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

这是我试图运行的功能.您可以看到我尝试正确设置标头的许多尝试.我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.它在两种情况下都能完美地工作(因为它不会是交叉原点).
2. 任何没有正确配置的CSP且启用了自定义标头的站点.OPTIONS请求将失败,它将准确报告没有Access-Control-Allow-Origin标头
3. 没有启用自定义标头的任何没有正确配置的CSP的站点.OPTIONS请求将通过(您将知道,因为Chrome永远不会告诉您它发生了),您将在响应标头中看到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)添加method和path键入http事件对象,和

2)将cors对象缩进到另一个级别.它曾经是活动的最高层http.

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