如何修复Vue DevServer代理Windows认证Web API的间歇性401错误？

核心问题分析 #

Windows认证（NTLM/Kerberos）依赖持久连接+身份验证上下文的连续性，DevServer默认代理配置在处理这类认证时，容易出现连接断开、上下文丢失的情况，进而导致401反复触发、凭证验证失败甚至账号锁定。

可行修复方案 #

1. 强制代理绑定NTLM会话 #

修改vue.config.js的代理配置，添加NTLM认证标识并优化长连接参数，确保会话上下文不丢失：

module.exports = {
    devServer: {
        // ...其他配置
        proxy: {
            '/webapi': {
                target: 'https://localhost:44394',
                logLevel: "debug",
                changeOrigin: true,
                auth: 'ntlm', // 新增：指定NTLM认证类型
                preserveHeaderKeyCase: true, // 保留请求头大小写，适配Windows认证规则
                agent: new HttpsAgent({
                    maxSockets: 50,
                    keepAlive: true,
                    keepAliveMsecs: 300000, // 延长连接保持时间至5分钟
                    timeout: 300000,
                    freeSocketTimeout: 60000,
                    rejectUnauthorized: false // 本地开发关闭证书校验，避免自签证书干扰
                }),
                // ...其他现有配置
            }
        }
    }
}

2. 禁用热重载（HMR）减少连接波动 #

热重载会频繁建立新连接，干扰NTLM会话连续性，临时关闭HMR改用普通刷新验证：

devServer: {
    // ...其他配置
    hot: false,
    liveReload: true // 用liveReload替代HMR，降低连接波动
}

3. 配置API信任本地Vue域名 #

在IIS Express的applicationhost.config中，将Vue开发域名（https://localhost:5002）加入API站点的Windows认证信任列表：

<location path="你的API站点名称">
    <system.webServer>
        <security>
            <authentication>
                <windowsAuthentication enabled="true">
                    <providers>
                        <add value="Negotiate" />
                        <add value="NTLM" />
                    </providers>
                    <extendedProtection tokenChecking="None" />
                </windowsAuthentication>
            </authentication>
        </security>
    </system.webServer>
</location>

4. 强制请求携带凭证缓存 #

在Vue的请求工具（如Axios）中全局开启凭证携带，让浏览器自动复用已缓存的Windows凭证：

// Axios全局配置示例
import axios from 'axios'
axios.defaults.withCredentials = true

// 单个请求指定示例
axios.get('/webapi/data', { withCredentials: true })

5. 替换代理为Nginx（终极方案） #

若DevServer代理始终不稳定，改用Nginx做本地反向代理，Nginx对NTLM会话的支持更成熟：

server {
    listen 5002 ssl;
    server_name localhost;

    ssl_certificate 你的本地证书路径.pem;
    ssl_certificate_key 你的本地证书路径.key;

    location /webapi/ {
        proxy_pass https://localhost:44394/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Authorization $http_authorization;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_ssl_verify off;
        proxy_set_header Proxy-Connection "keep-alive";
    }

    location / {
        proxy_pass http://localhost:你的Vue开发端口;
        proxy_set_header Host $host;
    }
}

额外注意事项 #

• 将Vue和API的本地域名/端口添加到浏览器的本地Intranet站点，Windows凭证缓存仅对该区域生效
• 避免频繁切换窗口或刷新页面，减少会话中断概率
• 确保API的Windows认证同时启用Negotiate和NTLM，优先使用Negotiate（Kerberos）协议更稳定

内容的提问来源于stack exchange，提问作者David Bretz