为何仅DELETE方法出现XMLHttpRequest预飞响应失败错误？GET方法正常

这问题我太熟了！咱们先把CORS里的「简单请求」和「非简单请求」掰明白，就能瞬间懂为啥GET正常、DELETE直接掉链子👇

浏览器对跨域请求的管控分两种情况，这就是关键差异：

• 简单请求：满足以下所有条件的请求，浏览器会直接发送实际请求，不会额外发预飞（OPTIONS）请求：

  1. 请求方法仅限 GET/HEAD/POST 三者之一
  2. HTTP头仅包含 Accept、Accept-Language、Content-Language、Last-Event-ID，且 Content-Type 只能是 application/x-www-form-urlencoded、multipart/form-data、text/plain 这三种
  3. 没有自定义的请求头
     你的GET请求刚好踩中所有“安全线”，所以浏览器直接发请求，只要后端响应头带了 Access-Control-Allow-Origin，就能正常拿到结果。

• 非简单请求：像 DELETE 这种不在简单方法列表里的，或者带自定义头、Content-Type 不符合要求的请求，浏览器会先发送一个预飞OPTIONS请求——相当于提前问服务器：“我能不能发这个DELETE请求呀？”
  只有服务器正确响应这个OPTIONS请求（返回允许的方法、头信息等），浏览器才会接着发实际的DELETE请求。你的问题就出在这：后端没配置对OPTIONS请求的响应，导致预飞直接失败，浏览器当场终止了后续的DELETE操作，所以你才会看到 Preflight response is not successful 的报错。

针对PHP后端 #

在你的PHP资源文件最开头，先处理OPTIONS预飞请求：

// 优先处理OPTIONS预飞请求
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    // 允许的跨域源，*表示允许所有，也可以指定你的Angular项目域名（比如http://localhost:4200）
    header('Access-Control-Allow-Origin: *');
    // 允许的请求方法，一定要包含DELETE和OPTIONS
    header('Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS');
    // 允许的请求头，如果有自定义头就加在这里
    header('Access-Control-Allow-Headers: Content-Type');
    // 返回200状态码，告诉浏览器预飞通过
    http_response_code(200);
    exit();
}

// 下面再写你原本处理GET/DELETE的业务代码
// ...

针对Express服务器（你提到的相关场景） #

直接用cors中间件快速配置，省得自己写OPTIONS逻辑：

const express = require('express');
const cors = require('cors');
const app = express();

// 配置CORS规则，明确允许DELETE等方法
app.use(cors({
    origin: '*', // 建议替换成你的Angular项目实际域名
    methods: ['GET', 'POST', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type']
}));

// 后续写你的路由逻辑
// ...

你碰到的 XMLHttpRequest cannot load file:///… 错误，大概率是直接用本地文件协议（file://）打开了Angular页面——这种情况下浏览器的同源策略限制会更严格。建议用ng serve把Angular项目跑在本地服务器上，后端也启动对应的服务，统一用http协议访问，就能避免这类file://相关的跨域问题。

内容的提问来源于stack exchange，提问作者Maihan Nijat