使用 Netlify 后台功能对 POST 请求进行 CORS 问题故障排除

Question

我创建了一个 Netlify 后台函数来处理 POST 请求。目标是接收 POST 请求、执行generateEmbeddings 函数并发回响应。但是，当我尝试向 Netlify 函数发出 POST 请求时，遇到了 CORS 问题。尽管在我的函数中设置了 CORS 标头，我仍然收到跨源请求被阻止错误。我最初将此设置为服务器函数而不是后台函数，并且没有遇到任何 CORS 问题。由于更大的请求需要花费超过 10 秒的时间，我不得不转移到后台功能。

我收到的错误如下 跨源请求被阻止：同源策略不允许读取 https://my-netlify-site.netlify.app/.netlify/functions/webhooks-background 处的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）。状态代码：202。

跨源请求被阻止：同源策略不允许读取 https://my-netlify-site.netlify.app/.netlify/functions/webhooks-background 处的远程资源。 （原因：CORS请求未成功）。状态码：（空）。

这是我的后台功能的代码：

exports.handler = async (event) => {
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "POST, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type",
    "Content-Type": "application/json",  
  };
  if (event.httpMethod === "OPTIONS") {
    return {
      statusCode: 204,  
      headers,
      body: '', 
    };
  } else if (event.httpMethod === "POST") {
    try {
      const parsedData = JSON.parse(event.body);
      await generateEmbeddings(parsedData);
      return {
        statusCode: 202,
        headers: headers,
        body: "Webhook data received",
      };
    } catch (error) {
      console.error("Error handling request:", error);
      return {
        statusCode: 500,
        headers: headers,
        body: "Internal Server Error",
      };
    }
  } else {
    return {
      statusCode: 405,  
      headers,
      body: JSON.stringify({ message: "HTTP Method not supported. Use OPTIONS or POST." }),
    };
  }
};

如有任何建议，我们将不胜感激！

--更新

我的快速更新：我设法让我的后台功能在本地工作，但我仍然在生产中遇到障碍。主要问题似乎与标题有关。它们在我的本地开发人员上设置正确，但在生产中设置不正确。我已经使用curl验证了这一点。

我最初在 netlify.toml 文件中设置标头，但当这在生产中不起作用时，我尝试使用 _headers 文件。它当前放置在我的项目的根目录中。

这是我更新的后台功能的代码：

const { generateEmbeddings } = require("../../scripts/embedding");

exports.handler = async (event) => {
  if (event.httpMethod === "OPTIONS") {
    console.log("OPTIONS request received");
    return; 
  } 
  if (event.httpMethod === "POST") {
    try {
      const parsedData = JSON.parse(event.body);
      await generateEmbeddings(parsedData);
      console.log("Webhook data processed in the background");
    } catch (error) {
      console.error("Error handling request:", error);
    }
  }
};

这是我的 _headers 文件的内容：

/* 缓存控制：无缓存 访问控制允许来源：*

/.netlify/函数/* 访问控制允许来源：* 访问控制允许标头：内容类型、授权 访问控制允许方法：GET、POST、OPTIONS 任何指导或建议将不胜感激！

Answer 1

进一步的研究使我发现 netlify 后台函数会自动响应 202，不允许您设置 CORS 标头。

我的解决方法是通过实现无服务器函数来处理 CORS 标头来调用 Netlify 的后台函数。无服务器函数启动后台函数，管理函数调用和任何所需的数据处理。由于无服务器和后台功能都托管在同一域中，因此无需为后台功能配置 CORS 标头。