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

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

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

Answer 2

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

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