Cloudflare worker CORS 被忽略

Question

我使用 CF Workers 创建了一个 SendGrid 表单并设置（用于测试）Access-Control-Allow-Origin", '*' 但它在前端被忽略了：

Access to XMLHttpRequest at 'https://<domain>.workers.dev/' from origin 'https://<frontend-domain>.dev' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

是否还需要将其添加到 AXIOS POST 请求中？

这是我的工作文件中的代码：

const myHeaders = new Headers();
  myHeaders.set("Access-Control-Allow-Origin", '*');
  myHeaders.set("Access-Control-Allow-Methods", "GET,HEAD,POST,OPTIONS");
  myHeaders.set("Access-Control-Max-Age", "86400",);
  return new Response((emailResponse.ok), {status: 200, headers: myHeaders})

这是 AXIOS 请求：

this.$axios.$post(
  "https://<domain>.workers.dev/",
  {
    name: this.mailData.name,
    eMail: this.mailData.eMail,
    phone: this.mailData.phone,
    message: this.mailData.message,
  },
  {
    headers: {
      "Content-Type": "application/json",
    },
  }
);

使用 Insomnia 一切正常，headers 在那里可见：

Answer 1

您已在对 POST 本身的响应中正确设置 headers。但是，在浏览器甚至发送 POST 之前，它使用“预检请求”来检查是否允许 cross-origin POST。预检请求是一个 OPTIONS 请求，使用相同的 URL。您还需要响应 OPTIONS 请求，具有相同的访问控制 headers 和状态代码 204（无内容）。

见the MDN documentation on preflight requests。

或者，如果您的应用程序将使用 Content-Type: text/plain 而不是 Content-Type: application/json 来接受 POST 请求，那么这将避免预检请求的需要，因为 Content-Type: text/plain符合 "Simple Request" 的条件，因此不需要预检。

Cloudflare worker CORS 被忽略

Cloudflare workers CORS ignored

javascript

ajax

cloudflare

axios

cloudflare-workers