CORS 中设置 credentials 为 true 为什么还是报错？

诺一（打工版）提问于 2026-02-27 21:41:24 阅读 26

安全

我在前端用 fetch 请求后端接口，需要携带 cookie，所以加了 credentials: 'include'。后端也设置了 Access-Control-Allow-Credentials: true，但浏览器还是报 CORS 错误，说不能同时设置 credentials 和通配符 origin。

我后端是用 Express 写的，现在允许的 origin 是 *，难道这个不行？试过改成具体域名，但开发环境和生产环境域名不一样，总不能硬编码吧？

fetch('https://api.example.com/login', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ user: 'test' })
})

后端目前这样设置：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

CORS安全

我来解答赞 3 收藏

反馈

2 条解答

萌新.珍珍 Lv1

问题很明确了，CORS 规范就是这样规定的：credentials 为 true 时，origin 不能用通配符 *，必须指定具体域名。

动态获取 origin 的方式很简单，改成下面这样就行：

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

  const origin = req.headers.origin;

  res.header('Access-Control-Allow-Origin', origin);

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

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

  next();});

这样浏览器发请求时带什么 origin，就反射回去什么 origin。



不过直接反射所有 origin 有安全风险，生产环境最好还是限制一下。可以搞个白名单：



<pre class="pure-highlightjs line-numbers"><code class="language-javascript">const allowedOrigins = [

  'http://localhost:3000',

  'http://localhost:8080',

  'https://your-prod-domain.com'

];



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

  const origin = req.headers.origin;

  if (allowedOrigins.includes(origin)) {

    res.header('Access-Control-Allow-Origin', origin);

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

  }

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

  next();

});




开发环境和生产环境的域名不一致这个问题，可以把允许的域名列表放到环境变量里，或者从配置文件读取，生产环境配生产域名，开发环境配本地地址，这样就不用硬编码了。


                
                    
                    
                        点赞
                        
                    
                    
                    
                    2026-03-19 13:02


    
        
            
                
            
            
                
                    闲人天朝
                    Lv1
                    
                
                
                    这个问题我遇到过无数次，简直是 CORS 坑里的常客。



浏览器安全策略规定，当请求携带 credentials（cookie、authorization header 等）时，Access-Control-Allow-Origin 绝对不能用 * 通配符，必须返回具体的域名。这是硬性规则，没得商量。



解决办法就是动态获取请求方的 origin，然后白名单校验后再返回。你后端代码改成这样：



const allowedOrigins = [

  'http://localhost:3000',

  'http://localhost:8080',

  'https://www.example.com',

  'https://example.com'

];



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

  const origin = req.headers.origin;

  

  if (allowedOrigins.includes(origin)) {

    res.header('Access-Control-Allow-Origin', origin);

  }

  

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

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

  

  // 处理预检请求

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

    res.sendStatus(200);

  } else {

    next();

  }

});




几个关键点说一下：



第一，req.headers.origin 能拿到发起请求的域名，白名单匹配上再返回，这样开发环境和生产环境都能搞定。



第二，Access-Control-Allow-Origin 返回的值必须是请求头里的 origin 字符串，不能是多个域名拼接，也不能是数组格式。



第三，别忘了处理 OPTIONS 预检请求，不然复杂请求会卡住。



前端这块你写的是对的，credentials: 'include' 没问题。另外建议用 cors 这个中间件，比自己手写靠谱：



const cors = require('cors');



const corsOptions = {

  origin: function (origin, callback) {

    if (!origin || allowedOrigins.includes(origin)) {

      callback(null, true);

    } else {

      callback(new Error('Not allowed by CORS'));

    }

  },

  credentials: true

};



app.use(cors(corsOptions));




这样维护起来清晰多了，不用每次都手动写一堆 header。
                
                
                    
                    
                        点赞
                        2
                    
                    
                    
                    2026-02-28 22:13


                    
                        
                            相关推荐
                            
                                
    
        
            1
            回答
        
        
            84
            浏览
        
    
    
        CORS请求中 credentials 设置为 true 为啥还是报错？
        我在前端用 fetch 调用自己后端的登录接口，设置了 credentials: 'include'，但浏览器一直报 CORS 错误，说不能携带凭证。后端明明加了 Access-Control-All...
        
            Newb.俊娜
                            安全                        2026-03-27 16:53:18
        
    

    
        
            2
            回答
        
        
            59
            浏览
        
    
    
        为什么设置了Access-Control-Allow-Origin却还是出现CORS错误？
        我用Express写了后端API，设置了app.use(cors())，但前端调POST接口时还是报错“No 'Access-Control-Allow-Origin' header present”...
        
            a'ゞ菲菲
                            安全                        2026-01-27 09:01:24
        
    

    
        
            2
            回答
        
        
            61
            浏览
        
    
    
        CORS Origin检查时，为什么设置了Access-Control-Allow-Origin却还是被拦截？
        我前端项目在调用后端API时遇到了CORS问题，明明在服务器响应头里设置了Access-Control-Allow-Origin: *，但Chrome还是报错"Origin http://localh...
        
            闲人东正
                            安全                        2026-02-15 11:17:35
        
    

    
        
            2
            回答
        
        
            574
            浏览
        
    
    
        CORS设置中用*通配符有什么安全风险？为什么改用具体域名反而报错？
        我在后端设置了CORS的Access-Control-Allow-Origin为"*"，结果被安全审计指出存在漏洞。改成允许特定域名后，浏览器却报"Response to preflight requ...
        
            玉佩~
                            安全                        2026-02-09 22:11:46
        
    

    
        
            2
            回答
        
        
            41
            浏览
        
    
    
        CORS 中 Access-Control-Allow-Methods 设置后为啥还是报错？
        我前端用 fetch 发了个 DELETE 请求，但浏览器控制台一直报 CORS 错误，说 method 不被允许。后端明明已经加了 Access-Control-Allow-Methods: GET...
        
            皇甫建英
                            安全                        2026-02-24 18:14:20
        
    

    
        
            1
            回答
        
        
            38
            浏览
        
    
    
        前端用代理解决CORS问题，为什么本地开发可以线上却不行？
        我在本地开发时用 Vite 的 proxy 配置成功绕过了 CORS，接口能正常调用。但部署到线上后，请求还是被浏览器拦了，报错 CORS header 'Access-Control-Allow-O...
        
            设计师清梅
                            安全                        2026-03-16 03:44:21
        
    

    
        
            1
            回答
        
        
            27
            浏览
        
    
    
        CORS 中 Access-Control-Allow-Methods 设置不生效怎么办？
        我在前端用 fetch 发了个 DELETE 请求，但浏览器报 CORS 错误，说方法不允许。后端明明设置了 Access-Control-Allow-Methods: GET, POST, PUT,...
        
            令狐爱菊
                            安全                        2026-03-13 18:52:24
        
    

    
        
            2
            回答
        
        
            32
            浏览
        
    
    
        Nginx配置CORS后前端还是报跨域错误怎么办？
        我在本地用React调后端API，后端部署在另一台服务器上。已经在Nginx里加了CORS头，但浏览器还是报跨域错误，不知道哪里没配对。 这是我的请求代码： fetch('https://a...
        
            码农彦森
                            工具                        2026-03-09 22:27:16
        
    

    
        
            2
            回答
        
        
            35
            浏览
        
    
    
        Nginx配置CORS后前端还是跨域，哪里出问题了？
        我在本地用Vue开发，请求后端API一直报跨域错误，明明已经在Nginx里加了CORS头，但浏览器还是拦着不让过，到底是哪没配对？ 我试过在Nginx的location块里加add_header，也重...
        
            Newb.柯依
                            工具                        2026-02-25 18:09:19
        
    

    
        
            2
            回答
        
        
            31
            浏览
        
    
    
        CORS白名单配置后前端还是跨域，咋回事？
        我后端已经加了CORS白名单，只允许我们自己的域名访问，但本地开发时用 localhost:8080 还是报跨域错误，是不是哪里没配对？ 我在 Vue 里是这样发请求的： <script set...
        
            UX-梓晴
                            安全                        2026-02-25 15:40:22


                
    Copyright © 2026 JZTHEME All rights reserved网站地图桂ICP备2022001918号-9