这里的核心问题是:“如何在使用无服务器框架处理的 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
您可以在以下站点的开发控制台中复制我在上面运行的问题:
- 启用或禁用自定义标头的 api.spongebobify.com。它在这两种情况下都可以正常工作(因为它不会是跨源的)。
- 任何没有正确配置 CSP 且启用了自定义标头的站点。OPTIONS 请求会失败,它会准确报告没有 Access-Control-Allow-Origin 标头
- 在未启用自定义标头的情况下没有正确配置 CSP 的任何站点。OPTIONS 请求将通过(您会知道,因为 Chrome 永远不会告诉您它发生了),您将在响应标头中看到 Access-Control-Allow-Origin。您还将看到响应“格式错误的请求。”。