Ajax请求为什么总被CORS拦截？

端木素伟提问于 2026-03-04 11:51:19 阅读 88

前端

我在本地用 http://localhost:3000 开发前端，调后端接口 http://api.example.com/login，结果浏览器报 CORS 错误，说跨域请求被阻止了。明明后端同事说已经加了 Access-Control-Allow-Origin 头，怎么还是不行？

我试过在 fetch 里加 credentials，也试过改请求头，但控制台一直显示：

Access to fetch at 'http://api.example.com/login' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

这是不是说明后端配错了？他到底应该怎么设置响应头才对？

我来解答赞 19 收藏

反馈

2 条解答

Prog.景叶 Lv1

这个CORS问题我遇到过太多次了...问题出在后端配置上。浏览器报错说得很清楚了：当请求带凭证（credentials）时，Access-Control-Allow-Origin不能用通配符*。

后端同事需要这么改响应头：

Access-Control-Allow-Origin: http://localhost:3000

Access-Control-Allow-Credentials: true

前端fetch调用也得对应调整：

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

  credentials: 'include'

})

注意安全：
1. 生产环境别直接用localhost，要改成你们的前端域名
2. 建议后端实现一个白名单机制，不要简单硬编码localhost
3. 敏感接口务必限制允许的origin，别图省事用*

如果后端是Node.js，可以这么配（Express示例）：

app.use(cors({

  origin: 'http://localhost:3000',

  credentials: true

}));

遇到这种问题建议前后端一起调试，用Postman或curl先确认后端返回的头是否正确，再排查前端。

2026-03-08 17:06

a'ゞ风云 Lv1

兄弟，这报错信息其实已经把答案告诉你了，关键就在那句 'credentials mode is include'。

问题很明确：你的前端 fetch 请求里带了 credentials（比如要带 cookie 做登录鉴权），这种情况下，后端响应头的 Access-Control-Allow-Origin 就绝对不能是通配符 *。这是浏览器的安全策略，没商量。

后端同事可能图省事，或者以前没带 cookie 就直接配了 *，但现在不行了。让他改两件事：

第一，把 Access-Control-Allow-Origin 的值改成你前端的具体地址，也就是 http://localhost:3000。千万别写成 *，也不要写一堆域名逗号隔开（那是老掉牙的写法，现在不支持），如果要支持多环境，得根据请求头的 Origin 动态返回。

第二，必须加上 Access-Control-Allow-Credentials: true，表示允许携带凭证。

如果后端是 Node.js 写的，代码大概得这么改：

// 这里的 origin 最好做一下白名单校验，不要直接返回请求头的 Origin

const allowedOrigin = 'http://localhost:3000';



res.setHeader('Access-Control-Allow-Origin', allowedOrigin);

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

另外提醒他一句，既然改了 Origin 头，浏览器肯定会发预检请求（OPTIONS），让他确保 OPTIONS 请求也能正常返回这两个头，不然还是会被拦。让他去查一下 Nginx 或者网关层是不是也配了 *，有时候中间层也会搞鬼。

2026-03-04 14:48