时间戳

首页 > 解决方案 > 尽管存在 Access-Control-Allow-Origin 标头，但 Chrome 中的 CORS 问题

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

问题描述

开发人员添加了新的 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:8080”访问“http://localhost:3000/v1/blog/1f3j20k5qh”处的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

标签： javascriptnode.jsgoogle-chromecors

解决方案

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

推荐阅读