React项目Banner.js调用Axios请求接口报404错误如何解决

数据老陈

2026-8-28

问题现象

React应用开发过程中，Banner.js组件内发起接口请求时触发404报错，控制台输出错误信息如下：

AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
GET http://localhost:3000/discover/tv?api_key=500179a347e1027821840c9690d80634&with_networks=213 404 (Not Found)

已在axios.js中自定义配置了基地址为TMDB官方接口的Axios实例，但实际请求未访问TMDB地址，反而被发送到本地3000端口。涉及的问题代码如下：

Banner.js 问题代码

import axios from 'axios';

function Banner(props) {
const [movie,setMovie] = useState([])

useEffect(() => {
   async function fetchData(){
     const request = await axios.get(props.url);
     
    setMovie(
     request.data.results[
       Math.floor(Math.random() * request.data.results.length - 1)
     ]
    )
    return request;
   }
   fetchData();
 }, [])

console.log(movie)

   return (
     <header>

     </header>
   );
}

export default Banner;

axios.js 自定义实例代码

import axios from "axios" ; 

const instance = axios.create({
    baseURL: 'https://api.themoviedb.org/3',
})

export default  instance ;

App.js 组件传参代码

import React from "react"
import './App.css';
import Row from "./Row";
import requests from "./requests";
import Banner from './Banner';
import Nav from './Nav';

function App() {
  return (
    <div className="App">
      <Nav/>
      <Banner url = {requests.fetchNetflixOriginals}/>
      <Row 
      title = "Netfilx Originals" 
      url = {requests.fetchNetflixOriginals}
      isLargeRow 
      />
    </div>
  )
}

根因分析

核心错误：Banner.js中引入Axios的方式错误。文件头部直接从axios包引入的是原生默认Axios对象，该对象没有配置TMDB接口的baseURL，传入相对路径发起请求时，浏览器会默认以当前页面源地址（即本地React服务的http://localhost:3000）为基准拼接完整请求地址，最终导致请求发到本地端口触发404。
隐藏语法问题：Banner.js中使用了useState、useEffect两个React钩子，但未从React包中导入对应依赖，运行时会直接抛出钩子未定义的错误。
逻辑bug：随机选取电影条目的下标计算存在顺序问题，Math.floor(Math.random() * request.data.results.length - 1)会先做乘法再减1再取整，最终可能得到-1的非法下标，触发数组越界报错。

修复方案

修正Banner.js的依赖引入：将原生Axios的引入替换为自定义配置好基地址的Axios实例，同时补全React钩子的导入。

// 移除错误的原生axios引入
// import axios from 'axios';
// 替换为自定义实例，路径根据axios.js的实际存放位置调整
import axios from './axios';
// 补全React钩子导入
import React, { useState, useEffect } from 'react';

修正随机下标计算逻辑，避免非法下标：

// 移除有越界风险的写法
// Math.floor(Math.random() * request.data.results.length - 1)
// 替换为正确写法，保证下标范围在0 ~ 数组长度-1之间
Math.floor(Math.random() * request.data.results.length)

修复完成后，重新运行项目即可看到请求正确发往TMDB官方接口，不再出现本地404报错。

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