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

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

前端

我在本地用 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'.

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

我来解答赞 4 收藏

反馈

1 条解答

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