Axios GET请求导致HTML页面无限频繁重载问题求助

核心问题分析 #

你的代码触发无限请求循环和页面重载，主要有以下几个原因：

• 拦截器语法错误：window. location. href中间的空格会导致window.location访问失败，条件判断逻辑失效，即使当前在login页面也会触发跳转，形成循环。
• 无效的客户端请求头：Access-Control-Allow-*系列头是服务器响应头，客户端发送请求时设置这些头会导致请求异常，触发错误处理逻辑。
• 顶层请求执行：Axios请求直接写在模块顶层，页面一加载就执行，若请求触发跳转，新页面加载后会再次执行请求，形成循环。

解决方案 #

1. 修复拦截器的语法错误 #

修正window.location.href的空格问题，同时添加可选链避免error.response不存在时的报错：

axiosInstance.interceptors.response.use(
  (response) => {
      hideLoader();
      return response; // 无需Promise.resolve，直接返回response即可
  },
  (error) => {
      hideLoader();
      
    // 修复空格问题，添加可选链
    if(error.response?.status === 401 && !window.location.href.includes('login.html')) {
      window.location.href = 'login.html';
    }
      return Promise.reject(error);
  },
);

2. 移除无效的CORS请求头 #

删除Axios实例中设置的Access-Control-*系列头，这些头仅由服务器返回：

const axiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:8000/api',
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    }
});

3. 将请求包裹在DOM加载完成事件中 #

避免页面一加载就执行请求，确保DOM渲染完成后再发起请求，同时防止重复执行：

import axiosInstance from "../helpers/axiosInstanceClient.js";

function updateContent(response) {
  document.getElementById("hello").innerHTML = response.data.Tot;
}

function fetchSellerData() {
  axiosInstance
    .get("/seller")
    .then(updateContent)
    .catch((error) => {
      console.error("Error fetching data:", error);
    });
}

// 等待DOM加载完成后执行请求
document.addEventListener('DOMContentLoaded', fetchSellerData);

额外检查项 #

• 确认localStorage.getItem('token')获取的是有效令牌，避免因令牌无效反复触发401跳转。
• 检查login.html是否引入了index.js代码，若有则移除，防止login页面加载时触发请求导致循环。

内容的提问来源于stack exchange，提问作者hatem gharsallah