11

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

我正在使用 AWS Lambda 上的无服务器框架编写应用程序(API 是通过 AWS API Gateway 管理的。坦率地说,我不完全确定这意味着什么或为我提供了什么好处,但这就是无服务器自动为我配置的)。我正在尝试创建一个需要启用 CORS 的开放 API。我正在使用 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。您还将看到响应“格式错误的请求。”。
4

2 回答 2

16

我认为问题在于您将 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)在事件对象上添加methodpath键,以及http

2) 将cors对象缩进另一个级别。它以前是http事件的最高级别。

让我知道这是否有帮助:)

于 2017-12-30T03:39:20.307 回答
0

问题是Prefilght 请求是如何工作的,根据我的经验,这个过程不能很好地仅在 GET 方法上配置自定义标头,因此,只需添加 POST 方法并修复 CORS 问题:

events:
  - http:
      path: admin/{type}
      method: get
      cors:
        origin: '*'
        headers:
          - token
        allowCredentials: false
  - http:
      path: admin/{type}
      method: post
      cors:
        origin: '*'
        headers:
          - token
        allowCredentials: false

这个CORS 和 API 网关生存指南使用 CORS 和 JavaScript 修复常见问题帮助我理解问题和解决方案。

最后这是我的 JS 代码

fetch(api_url,{
  method : 'GET',
  mode: 'cors',
  headers: {
    token: 'XXXX-XXXX'
  }
}).then((resp) => resp.json())
于 2022-02-03T02:25:20.803 回答