React+Axios请求API报错：Cannot read properties of undefined (reading 'protocol')

问题 #

在React项目中使用Axios请求API获取数据时，控制台抛出错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')

实现代码：

import React,{useState,useEffect} from 'react'
import "../App.css"
import axios from "axios"
const Main = () => {
    const [loading,setLoading] = useState(false)
    const [data,setData] = useState ([])
    useEffect (() =>{
        setLoading(true)
        axios({
            method:"GET",
            URL:'https://fakestoreapi.com/products',
         
        }).then(res => {
            console.log (res.data)
            setData(res.data)
        })
        .finally(()=> setLoading(false))
    },[])
  return (
   <div></div>
  )
}

export default Main

报错信息：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'protocol')
    at isURLSameOrigin (isURLSameOrigin.js:57:1)
    at dispatchXhrRequest (xhr.js:147:1)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js:16:1)
    at dispatchRequest (dispatchRequest.js:58:1)
    at Axios.request (Axios.js:109:1)
    at wrap (bind.js:9:1)
    at Main.js:10:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)

解决方案 #

这个错误的根源是Axios配置对象的属性名写错了——你用了大写的URL，但Axios要求的是小写的url参数。

修正后的代码：

import React,{useState,useEffect} from 'react'
import "../App.css"
import axios from "axios"
const Main = () => {
    const [loading,setLoading] = useState(false)
    const [data,setData] = useState ([])
    useEffect (() =>{
        setLoading(true)
        axios({
            method:"GET",
            url:'https://fakestoreapi.com/products', // 改为小写url
         
        }).then(res => {
            console.log (res.data)
            setData(res.data)
        })
        .catch(err => { // 建议添加catch捕获异常，避免未处理的Promise报错
            console.error('请求失败:', err)
        })
        .finally(()=> setLoading(false))
    },[])
  return (
   <div></div>
  )
}

export default Main

错误原因说明 #

Axios的配置对象中，指定请求地址的参数是小写的url，你写的大写URL属于未被识别的属性，导致Axios无法获取到有效请求地址，内部处理时尝试读取一个undefined值的protocol属性，最终抛出类型错误。

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