来自 gatsby 站点中 localhost 的 amazon lambda 函数的交叉原点

如何解决来自 gatsby 站点中 localhost 的 amazon lambda 函数的交叉原点

我有以下代码，当我使用 netlify dev 作为本地无服务器函数运行它时，它可以工作，但我需要它来运行从开发服务器到托管服务器功能的跨域。我将该函数放在 aws lambda 函数中，但在我的 https:dev.website.com 上出现了跨源阻止错误，我以为我在返回对象中有正确的标头，所以不确定为什么会出现跨源错误.

任何帮助都会很棒

const sanityClient = require("@sanity/client");
const client = sanityClient({
  projectId: "random-id",dataset: "production",useCdn: true,});

exports.lambdaHandler = async (event,context) => {
  var body = JSON.parse(event.body);

  //console.log(body.price_id)

  try {
    const checkPriceId = async (test) => {
      const query = `*[_type == "products" && price_id == "${body.price_id}"]`;

      const documents = await client.fetch(query,{}); // this Could throw

      return documents.map((document) => document.sold);
    };

    var ok = checkPriceId().then((test) => {
      return new Promise(function (resolve,reject) {
        //console.log(test) // this will log the return value from line 7
        console.log(test);
        resolve(test);
      });
    });

    var bools = await ok;
    // prettier-ignore

    return {
      statusCode: 200,headers: {
        'Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': 'Content-Type','Access-Control-Allow-Methods':'GET,POST,OPTION',},body: JSON.stringify({
        sold: bools,}),};
  } catch (err) {
    return { statusCode: 500,body: err.toString() };
  }
};

如果有帮助，这是我对函数的请求

 var fetchUrl = https://random.executue-api.aws.com/prod/sold //not exact 

 var fetchData = async function () {
    const response = await fetch(fetchUrl,{
      method: "post",headers: {
        "Content-Type": "application/json",body: JSON.stringify({
        price_id: final,})
      .then(res => {
        return res.json()
      })
      .catch(error => console.log(error))

    return response
  }

更新：

我尝试按照下面答案中建议的方式添加 cors，但在下面看到它失败，所以我尝试手动添加之后看到的方法响应。

我仍然遇到跨域错误。而且我已经更改了域，因此现在也是 https。真的卡在这里了。

我对此进行了更多研究，似乎在实际发布之前，它对 options 方法进行了 cors 检查，因此我添加了相同的访问控制标头，并进行了部署，但没有奏效。不太明白这个。

解决方法

你的标题在我看来没问题。（注意：如果您混合使用 HTTP 和 HTTPS，您很可能会在客户端出现混合内容错误）。如果您在 Web 浏览器的控制台中看到的只是 CORS 问题，那么您可能没有在 AWS 中正确配置 API 网关。

在 AWS 中，转到 API 网关，您应该会看到如下所示的内容：

确保您启用 CORS，然后重新部署。

更新：仅查看我使用 AWS 设置的 lambda 函数的先前实现。我声明的标题如下：

headers: {        
  "Content-Type" : "application/json","Access-Control-Allow-Origin" : "*","Allow" : "GET,OPTIONS,POST","Access-Control-Allow-Methods" : "GET,"Access-Control-Allow-Headers" : "*","Access-Control-Allow-Credentials" : true
}

不过你的标题在我看来还不错。但是，当您在 API 网关中创建方法时，您是否选择了使用代理 Lambda 集成？（见截图）。

您的客户端提取请求看起来没问题。供参考我的是：

const url = 'your url';
const options = {
  method: 'POST',headers: { "Content-Type": "application/json" },body: JSON.stringify(data),};
fetch(url,options).then(res => res.json());

与此问题无关，但不建议将 Async/Await 与 .then 承诺链接混合使用。但这不是你遇到的问题。只是有一点需要注意。

检查集成响应中的值/尝试为选项和手动设置它们 POST（如果可行，请确保您从 lambda 正确传递响应）。

您的 POST 操作应该只需要 Access-Control-Allow-Origin 标头。另外两个（Access-Control-Allow-Methods、Access-Control-Allow-Headers）属于OPTION动作。请参阅此文章，并注意预检请求的完整示例交换（灰色）：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests