尽管存在 Access-Control-Allow-Origin 标头，但 Chrome 中的 CORS 问题答案

【问题标题】：CORS issue in Chrome though Access-Control-Allow-Origin header is present尽管存在 Access-Control-Allow-Origin 标头，但 Chrome 中的 CORS 问题
【发布时间】：2021-07-18 10:23:35
【问题描述】：

一位开发人员添加了新的 DELETE 博客端点，其源代码基于现有的有效 DELETE 页面端点。它可以在他的电脑上运行，但在我的电脑上却失败了。由于据称缺少 CORS 标头，Chrome 未运行 DELETE 方法。

附图显示了三种不同 OPTION + DELETE/POST 请求的 Chrome 开发工具屏幕截图。我已经检查过 OPTIONS 始终针对 DELETE 页面请求运行，它返回 localhost 的 CORS 标头。响应与 POST 图片或 DELETE 页面相同。我看不出有什么区别，也找不到解释。

后端是用 NodeJS 编写的

此代码适用于我的电脑： https://github.com/literakl/mezinamiridici/blob/master/backend/src/handlers/pages/deletePage.js

module.exports = (app) => {
  app.options('/v1/pages/:pageId', auth.cors);
  app.delete('/v1/pages/:pageId', auth.required, auth.cms_admin, auth.cors, async (req, res) => {

此代码适用于开发人员的 Chrome 和 Firefox，但在我的 Chrome 或 Edge 上失败 https://github.com/literakl/mezinamiridici/blob/master/backend/src/handlers/items/deleteBlog.js

module.exports = (app) => {
  app.options('/v1/blog/:blogId', auth.cors);    
  app.delete('/v1/blog/:blogId', auth.required, auth.cors, async (req, res) => {

前端是用 Vue 编写的。带有删除按钮的页面从 http://localhost:8080/p/leos/b/wing-suit-2 加载。选项返回：

Access-Control-Allow-Headers: Content-Type,Authorization
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: http://localhost:8080

阻止的 DELETE 请求包含以下请求标头：

Origin: http://localhost:8080
Referer: http://localhost:8080/

所以我假设一切都设置正确。请问哪里出了问题？

更新 1：

控制台日志：

在“http://localhost:3000/v1/blog/1f3j20k5qh”访问 XMLHttpRequest 来自原点“http://localhost:8080”已被 CORS 策略阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。

【问题讨论】：

一个有趣的点是 Chrome 在 OPTIONS 请求之前显示了 DELETE 请求。标题具有相同的日期（直到秒）。另一方面，其他请求也按此顺序显示并且它们确实有效。
更多发现：我已经回家了。问题消失了。会不会是不同的WiFi造成的？

标签： javascript node.js google-chrome cors

【解决方案1】：

我看到的一件事是选项调用中的标头中的值与删除调用中的不同，特别是它的限制较少，可能是浏览器对此有异议

【讨论】：

请具体一点。你介意哪个值？
我可以看到日期的唯一区别。
看的更清楚，你的 accesss-control-allow-origin 标头在你的选项调用中有一个特定的主机值，在实际的删除调用中有一个 *
对不起，我不明白你的意思。我看不到。请输入您的意思。
我的意思是响应标头：您的 access-control-allow-origin 标头在选项调用中具有值localhost;8080，在您的删除/发布/获取调用中具有值 *