在服务器端使用 cors 从 axios 响应中获取 Cookie答案

【问题标题】：Get Cookie from axios response using cors on the server side在服务器端使用 cors 从 axios 响应中获取 Cookie
【发布时间】：2018-07-28 12:52:18
【问题描述】：

我使用 express 4.16.2 和 cors 2.8.4 针对 Node.js 服务器运行 Vue.js 2.5.2 和 axios 0.17.1。

当我登录时

axios.post('/login', {"username": "a", "password": "b").then((response) => {
    console.log(response.headers['set-cookie']);
}

我得到undefined 作为输出。在其他topics 上，他们告诉设置Access-Control-Expose-Headers: Access-Token, Uid。我在我的服务器配置中这样做了：

const express = require('express'),
cookieParser = require('cookie-parser'),
cors = require('cors'),
bodyParser = require('body-parser'),
const server = express();

server.use(cookieParser());
server.use(bodyParser.json({limit: '50mb'}));
server.use(bodyParser.urlencoded({limit: '50mb', extended: true}));

server.use(cors({
  "origin": "*", 
  "credentials": true,
  "exposedHeaders": ["Uid", "Access-Token"]
  // same for "Uid, Access-Token"
  // Adding "set-cookie" to this list did not work.
}));

我可以在 Chrome 开发者工具栏中看到，Access-Control-Expose-Headers-Option 设置在 OPTION-Request 和 POST-Request 中。同样在 POST-Request 中，我可以看到 set-cookie-header。但是response.headers['set-cookie']的日志还是未定义。

编辑：

此行为处于开发模式：服务器在 localhost:3000 上运行，客户端在 localhost:8080 上运行。

当我为生产模式构建 vue.js-client 以便两者都在 localhost:3000 上运行时，它可以工作。

有什么想法吗？

谢谢！

【问题讨论】：

您需要将set-cookie 添加到exposedHeaders 列表中，因为这说明允许客户端访问哪些标头
嗨 Ferrybig，不，遗憾的是这不起作用。与此同时，我注意到了其他一些事情......我编辑了我的帖子
你找到解决办法了吗？
不，我从我的项目中删除了有关身份验证的所有内容并切换到 keycloak。所以我在我的客户端中针对 keycloak 进行身份验证并获得一个令牌。然后我将令牌连同我的请求一起发送到服务器，服务器也会根据 keycloak 检查这个令牌。

标签： node.js express vue.js cors

【解决方案1】：

Access-Control-Allow-Credentials: true（即“控制”是否可以在 CORS 请求中使用 cookie 和其他“凭据”）与Access-Control-Allow-Origin: *不兼容 - 您需要指定确切的来源如果您想使用 cookie，则请求来自 ACAO 响应标头。

基本上，提取Origin 请求标头并确保它在Access-Control-Allow-Origin 响应标头中“镜像回”。在您的情况下，它可能是 https://localhost:8080，但您不应该对其进行硬编码 - 始终从 Origin 请求标头中提取它。

所以答案应该就像在server.use.cors.origin 值中指定Origin 请求头的值一样简单。

【讨论】：