Vite+Axios+ASP.NET Core WebApi跨域请求携带Cookie失败

问题重现

从页面地址发送请求到服务器接口，跨域没有问题，调用接口也正常，返回Cookie也正常，但是在后续接口没有自动带上Cookie。

服务器接口地址：https://127.0.0.1:65001

页面地址：https://localhost:3000

使用的浏览器Microsoft Edge version.92

首先、设置跨域请求携带Cookie

此部分需要分为两部分，服务端和客户端

服务端

需要为请求响应设置响应头access-control-allow-credential: true

具体在ASP.NET Core里的操作则对应如下代码。

在Startup.cs中设置如下

services.AddCors(setup =>
{
    setup.AddPolicy(DefaultCorsPolicyName, config =>
    {
        config.WithOrigins(allowedOrigins.ToArray())
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials();
    });
});

在其他语言框架中可能实现方式不同

客户端

在axios中设置允许携带Cookie

可以使用拦截器在每个请求上设置，也可以直接修改设置

axios.defaults.withCredentials = true;
axios.interceptors.request.use(
    (config) => {
        config.withCredentials = true; // 允许携带cookie
        return config;
    }
);

经过如上设置后能正常跨域请求，但是后续接口无法自动携带Cookie，导致服务器身份认证失败。

问题原因　

经过反复排查，最后确认问题出现在请求头Sec-Fetch-Site上，当Sec-Fetch-Site的值为cross-site时，则不携带Cookie；当值为same-site时，则可以携带Cookie。

参考资料：Sec-Fetch-*请求头，了解下? - 福禄网络研发团队 - 博客园 (cnblogs.com)

解决

服务器和客户端的地址都是用相同的IP地址，问题解决。