Vue3应用登出后重新登录触发CORS策略错误，刷新即可恢复，是什么原因？

问题核心原因 #

你遇到的CORS报错本质是请求身份无效触发服务端重定向，和刷新相关的根因出在你的Axios配置初始化时机错误。

为什么刷新能解决问题

你的Axios默认配置只在应用首次加载（main.js执行）时运行一次：

• 首次初始化时如果用户未登录，localStorage.getItem('authToken')拿到的是null，会给Axios全局设置请求头Authorization: Bearer null
• 后续你登录成功把新token存入localStorage、或者登出清空localStorage的token时，都没有同步更新Axios的全局请求头配置，这时候发请求携带的还是旧的无效身份凭证
• 服务端识别到无效身份后返回3xx重定向到首页地址https://vue.tatrytec.eu/，浏览器处理预检请求时不允许重定向，且重定向的静态页面地址没有返回CORS响应头，就触发了报错
• 你刷新页面时main.js会重新执行，这时候会从localStorage读取最新的有效token赋值给Axios请求头，身份验证通过就不会触发重定向，CORS错误自然消失

额外的错误配置

你在Axios配置里加的axios.defaults.headers.common['Access-Control-Allow-Origin'] = 'https://vue.tatrytec.eu'是完全错误的操作：Access-Control-Allow-Origin是服务端需要在响应中返回的头，前端请求主动加这个头会被视为自定义请求头，不仅会额外触发预检请求，还可能导致服务端头校验失败。

修复方案 #

1. 先删除上面提到的错误的Access-Control-Allow-Origin请求头配置
2. 去掉初始化时写死的Authorization头设置，改用Axios请求拦截器动态读取最新token：

// 加到你的Axios配置位置
axios.interceptors.request.use(config => {
  const authToken = localStorage.getItem('authToken');
  if (authToken) {
    config.headers.Authorization = `Bearer ${authToken}`;
  }
  return config;
})

3. 登出逻辑里补充清空Axios全局身份头的操作：

// 登出时执行
localStorage.removeItem('authToken');
delete axios.defaults.headers.common['Authorization'];

内容的提问来源于stack exchange，提问作者Čamo