Cloudflare 工作人员 CORS 被忽略

Cloudflare workers CORS ignored

提问人:HenrijsS 提问时间:6/8/2021 更新时间:6/27/2023 访问量:2585

问:

我使用 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

这是我的 workers 文件中的代码:

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 一切正常,标题在那里可见:enter image description here

JavaScript Ajax Axios Cloudflare-Workers

评论


答:

8赞 Kenton Varda 6/8/2021 #1

您已正确将响应的标头设置为自身。但是,在浏览器发送 之前,它使用“预检请求”来检查是否允许跨域 s。预检请求是使用相同 URL 的请求。您还需要使用相同的访问控制标头和状态代码 204(无内容)响应请求。POSTPOSTPOSTOPTIONSOPTIONS

请参阅有关印前检查请求的 MDN 文档

或者,如果应用程序将接受请求 using 而不是 ,则无需预检请求,因为符合“简单请求”的条件,因此不需要预检。POSTContent-Type: text/plainContent-Type: application/jsonContent-Type: text/plain

评论

0赞 HenrijsS 6/9/2021
谢谢!我想知道 Preflight 是什么,但懒得去检查一下。通常,当使用稳定的框架时,它会自动发生,所以我从来没有想过它。处理 OPTIONS 请求解决了所有问题。干杯!