Vite+React中Axios调用TMDB API返回HTML而非JSON的问题

问题场景 #

调用TMDB电影API时，Axios返回Vite项目的index.html内容，但直接在浏览器访问API链接能正常获取JSON数据。

核心排查与修复步骤 #

1. 清除字符串中的隐藏特殊字符（最可能原因） #

你的代码中baseURL和fetchPopular的字符串可能包含零宽空格或不可见特殊字符，导致Axios无法正确识别远程API地址，转而请求本地Vite服务器，返回了项目入口HTML。

• 修复方式：手动重新输入以下代码片段，不要复制粘贴：
  • Axios.jsx：

    import axios from "axios";
    const instance = axios.create({
      baseURL: "https://api.themoviedb.org/3"
    });
    export default instance;
    

  • Requests.jsx：

    const API_KEY = "你的API密钥";
    const requests = {
      fetchPopular: `/movie/popular?api_key=${API_KEY}`
    };
    export default requests;
    

2. 验证完整请求URL #

在请求代码中添加日志，确认拼接后的URL是否正确：

useEffect(() => {
  let fetchData = async () => {
    // 打印完整请求地址
    console.log(`${axios.defaults.baseURL}${requests.fetchPopular}`);
    let response = await axios.get(requests.fetchPopular);
    console.log(response.data);
  }
  fetchData();
}, []);

如果打印的地址不是有效的TMDB API链接，说明路径拼接存在问题，需重新检查字符串。

3. 用原生Fetch验证API可用性 #

临时替换Axios为原生Fetch，确认API本身可正常访问：

useEffect(() => {
  let fetchData = async () => {
    let response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`);
    let data = await response.json();
    console.log(data);
  }
  fetchData();
}, []);

如果原生Fetch能正常返回JSON，说明问题出在Axios实例的配置上。

4. 检查Vite代理配置（若有） #

若项目配置了Vite代理，需确认代理规则是否错误地将TMDB请求转发到本地。检查vite.config.js中的proxy字段，确保没有匹配TMDB路径的规则：

// 错误示例（需移除）
export default defineConfig({
  server: {
    proxy: {
      '/movie': {
        target: 'http://localhost:5173',
        changeOrigin: true
      }
    }
  }
})

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