React项目axios配置的baseUrl不生效 请求默认指向localhost:3000求助

问题根因 #

你创建axios实例时配置字段拼写错误，axios官方规定基础路径的配置键为baseURL（URL三个字母全大写），你错误写为baseUrl，导致配置未被识别，axios默认使用当前页面域名作为请求前缀，因此请求被发送到了localhost:3000。

修复方案 #

修改axios.js中的实例创建代码即可：

import axios from 'axios'


const instance = axios.create({
    // 将baseUrl替换为正确的baseURL
    baseURL: `https://api.-----.com/svc/topstories/v2/`
})

export const api_key = '------------------------'

export const getTopStories = async () => {
    const {data: {results}} = await instance.get(`/home.json?api-key=${api_key}`)
    return results
}
export default instance

额外优化建议 #

你可以把查询参数放到axios请求的第二个配置项的params字段中，避免手动拼接URL字符串的疏漏：

await instance.get(`/home.json`, {
  params: {
    'api-key': api_key
  }
})

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