从 '' from origin '' 获取数据的访问已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' 标头

Question

我有这个 api（方法 get）连接到一个 lambda 函数，该函数从数据库中进行简单的选择，如果我用带有空体的邮递员测试端点，它确实可以工作（如果我理解的话，邮递员不在同一CORS 策略），以及在浏览器上键入端点。

但是当我尝试从简单的 js 中进行提取时，我收到错误： 从源“http://localhost”获取“...”的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我在 API Gateway 中启用了 CORS，均使用启用 CORS 选项 并在创建新资源时启用 API Gateway CORS

如果我使用网关测试我的端点，我还会发现Allow-content-allow-origin : * 在我的响应标头中：

我应该怎么做才能解决这个问题？

这是 JS 获取：

    console.log("pre fetch");

Show();
console.log("post fetch");
function Show(){
fetch("...").then(onResponse);//.then(onJson);
}
function onResponse(response){
    console.log(response);
    return response.json();
}

我删除了 onJson 以避免混淆，但即使如此，它也是同样的问题。

Answer 1

尝试将其也包含在您的函数中，就像这样， 我希望这会起作用：

const headers = {'Content-Type':'application/json',
                    'Access-Control-Allow-Origin':'*',
                    'Access-Control-Allow-Methods':'POST,PATCH,OPTIONS'}
const response = {
    statusCode: 200,
    headers:headers,
    body: JSON.stringify(X),
};
return response;

这里 X 是您要返回的响应。

Answer 2

如果您使用 Node.js，则需要安装 cors。 npm 安装 cors。 安装cors后，将其包含在您使用fetch功能的页面中，如下所示； const cors = require('cors'); 应用程序.use(cors()); 错误就会得到解决。

Answer 3

我制作了一个视频来说明如何解决这个问题。

您需要进入Lambda函数并添加特殊代码：

原版（不起作用）：

exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

新的，有效：

exports.handler = async (event) => {
    // TODO implement
    const response = {
        statusCode: 200,
                headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

您可以在这里找到此解决方案：https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

只需更换：

  "Access-Control-Allow-Origin": "https://www.example.com",

与

            "Access-Control-Allow-Origin": "*",

特别感谢用户KnowledgeGainer

此外，您需要在网关 API 端启用 CORS，只需按照此处的说明进行操作即可：https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html

Answer 4

对于 Lambda 函数 URL：

在 AWS 控制台中，转到 Lambda -> 函数 ->（选择函数）-> 配置 -> 函数 URL -> 编辑

选中 配置跨源资源共享 (CORS) 并为 允许源、允许标头和允许方法

输入 *

保存