Node.js API通过Axios无法接收Cookie及CORS报错问题求助

错误原因 #

当你把前端请求的withCredentials设为true时，浏览器会在请求中携带Cookie、HTTP认证等凭证信息。这时候后端CORS配置里的Access-Control-Allow-Origin如果用了通配符*，浏览器会直接拦截响应——因为安全规则不允许通配符域名和凭证模式同时存在，怕出现跨域凭证泄露的风险，所以就抛出了这个错误。

解决方法 #

1. 后端配置指定允许的前端域名 #

把后端的Access-Control-Allow-Origin设为前端的具体域名（比如http://localhost:3000），同时开启Access-Control-Allow-Credentials。以Express框架为例：

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

app.use((req, res, next) => {
  // 替换成你的前端实际域名和端口
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许携带凭证
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  // 允许的请求头
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

2. 同域部署（相同端口） #

如果前后端部署在同域（协议、域名、端口完全一致），浏览器会自动携带Cookie，不需要配置withCredentials和CORS，这也是最简单的方式——比如前端和后端都跑在localhost:3000，前端请求/api接口时直接自动带Cookie。

其他便捷接收Cookie的方式 #

反向代理 #

用Nginx这类工具把前端和API请求代理到同一个域名下，让浏览器认为是同域请求，自动携带Cookie。示例Nginx配置：

server {
  listen 80;
  server_name yourdomain.com;

  # 代理前端页面
  location / {
    proxy_pass http://localhost:3000; # 前端服务地址
  }

  # 代理API接口
  location /api {
    proxy_pass http://localhost:8080; # 后端API地址
    proxy_set_header Cookie $http_cookie;
    proxy_set_header Host $host;
  }
}

之后前端直接请求/api/xxx，浏览器就会自动带上Cookie。

本地存储替代 #

如果业务场景允许，也可以把原本存在Cookie里的数据放到localStorage或sessionStorage中，请求时手动把数据加到请求头或参数里。注意：敏感数据不要用这种方式，避免XSS攻击风险。

内容的提问来源于stack exchange，提问作者Zaki Kendil