Ajax请求为啥总是被CORS拦截？

轩辕治霞提问于 2026-03-12 23:30:20 阅读 4

前端

我在本地用 http://localhost:3000 调后端接口 http://api.example.com/data，浏览器一直报 CORS 错误，明明后端说已经加了跨域头啊？

我试过在 fetch 里加 credentials，也试过换 axios，但控制台还是报：

Access to fetch at 'http://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy

后端返回的响应头看起来是这样的：

{
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type"
}

这到底还缺啥？为什么还是跨域失败？

Ajax请求 CORS跨域

我来解答赞 2 收藏

反馈

1 条解答

技术浩宇 Lv1

这个问题挺典型的，我来说说具体是咋回事。

你后端返回的头看着好像挺全，但有个致命问题：**当请求需要带 credentials（Cookie、Authorization 这些）的时候，Access-Control-Allow-Origin 不能用 *（通配符）**。

你提到在 fetch 里加了 credentials，对吧？浏览器这波操作是正常的——它看到 withCredentials: true，但 Access-Control-Allow-Origin 却是 *，直接就给你驳回了。安全策略不允许这么干。

具体来说，你后端还缺一个关键头：Access-Control-Allow-Credentials: true

解决方案分两种情况：

第一种情况：你的接口确实需要带 Cookie 或 Authorization
后端必须把 * 改成具体的域名，同时加上允许 credentials 的头：

// 后端 Node.js/Express 示例

app.use((req, res, next) => {

  // 必须是具体的域名，不能是 *

  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');

  res.header('Access-Control-Allow-Credentials', 'true');

  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  

  // 预检请求直接返回

  if (req.method === 'OPTIONS') {

    return res.sendStatus(200);

  }

  next();

});

前端 fetch 这么写：

fetch('http://api.example.com/data', {

  method: 'GET',

  credentials: 'include',  // 这样会带 Cookie

  // 如果要带 Authorization 头，用下面的方式

  headers: {

    'Authorization': 'Bearer your-token'

  }

})

.then(res => res.json())

.then(data => console.log(data));

第二种情况：其实不需要带 credentials
那就把前端的 credentials 改成 'same-origin' 或者直接删掉，同时后端可以用 *。但看你的情况，大概率是想要带认证信息的。

还有一点：OPTIONS 预检请求也得处理好，很多后端就是漏了这个导致简单请求之外的都挂掉。

你检查一下后端代码，看看是不是没处理 OPTIONS 方法，或者头信息没返回全。

2026-03-12 23:37