vue.js - axios为何获取不到服务器返回的sessionID?

Question

VUE3项目，后端是thinkphp。
现在想在页面上显示一个由thinkphp生成的验证码，使用axios跨域来请求这个验证码接口。
现在是验证码图片已经可以显示了，但是就是获取不到请求验证码时服务器生成的sessionID。但是在浏览器F12网络中，可以看到有set-Cookie；就是在axios返回值中没有这项，axios跨域已经设置了，withCredentials也设置为true了。

axios跨域设置：

....
server: {
        proxy: {
            '/api': {
                target: 'https://***.cn', // 目标后端服务器地址
                changeOrigin: true, // 是否改变源地址
                secure: true, // 是否启用https协议
                withCredentials: true, // 是否携带cookie
                pathRewrite: {
                    '^/api': '', // 重写路径
                },
            },
        },
.....

验证码页面

....
initCaptcha() {
            this.$http.get('https://***.cn/api/Validate/verify_code').then(response => {
                console.log(response);
                this.setSession(response.header);
                //this.onRefresh();
            })
        },
....

从console.log的结果来看，没有找到set-cookie项

但是在F12“网络”项中，能看到有这个项

查了一圈搜索后发现axios不支持跨域携带cookie，但是我上面已经对axios做了设置。为何在请求返回中还是拿不到这个？

Answer 1

浏览器不允许 JavaScript 代码访问 Set-Cookie 标头，对应的响应会被滤除。

尝试使用 document.cookie 访问 cookie，或者让后端把 SessionID 放在 HTTP Header 的其它字段。

Answer 2

支持跨域携带cookie是指允许请求在发送的时候携带cookie，即在request header中。set-cookie是在response Headers响应头中由后端返回的，对于前端来说因为安全策略这是不可见的，使用getAllResponseHeaders是获取不到了，在控制台的接口中可以看到，是因为这是浏览器实现的。

另外，你不需要打印出来，直接在控制台->应用->cookie中查看有没有存进去，如果设置的cookie域和你的网站域一样的话，那么可以直接使用document.cookie进行获取

Answer 3

Axios 本身并不阻止跨域请求携带或接收 cookies。但是，跨域携带 cookies 需要满足几个条件：

1. 服务器端设置：服务器需要配置 CORS（跨源资源共享）策略，允许跨域请求，并指定 Access-Control-Allow-Credentials 响应头为 true。此外，还需要在 Access-Control-Allow-Origin 响应头中指定具体的源地址，而不是使用 * 通配符，因为当使用 * 时，浏览器不会发送或接收 cookies。
2. 客户端设置：在发起请求时，需要设置 withCredentials 选项为 true，这样浏览器才会在跨域请求中包含 cookies。你已经在代理设置中正确设置了 withCredentials: true，但你在实际发起请求时，需要确保这个选项也被传递给了 axios 实例。
3. 请求和响应类型：通常，只有某些 HTTP 请求（如 POST、GET）和响应（如 200 OK）可以携带 credentials。确保你的请求和响应类型都支持 credentials。
4. 前端代码：在你的 initCaptcha 方法中，你尝试从 response.header 中获取 set-cookie，但这不是正确的方式。Axios 将响应头保存在 response.headers（注意是复数形式）中，并且由于 HTTP 响应头名称通常是大写并带有连字符（如 Set-Cookie），你可能需要使用 response.headers['set-cookie'] 来获取它。但是，请注意，由于安全性和隐私性的原因，浏览器可能不会允许你直接访问 set-cookie 响应头。
5. 缓存和Cookie策略：浏览器有自己的缓存和 cookie 策略。确保这些策略没有阻止 cookie 的设置或读取。

针对你的问题，这里有一些建议：

1. 检查服务器端设置：确保服务器正确设置了 CORS 策略，并允许特定的源地址进行跨域请求，同时设置 Access-Control-Allow-Credentials: true。
2. 检查前端代码：确保在发起请求时，你正确地将 withCredentials 选项传递给了 axios。此外，不要试图从响应头中直接读取 set-cookie，因为这通常是不可能的。相反，你应该检查浏览器的 cookie 存储，看看是否已经成功设置了 sessionID。
3. 使用浏览器的开发者工具：使用浏览器的开发者工具（如 Chrome 的 DevTools）来检查网络请求和响应，以及浏览器的 cookie 存储。这可以帮助你诊断问题所在。
4. 考虑其他因素：确保没有其他的网络中间件（如代理服务器、负载均衡器等）在干预你的请求和响应，它们可能会修改或阻止 cookie 的设置或读取。