使用 Axios 的 HTTP 获取请求在 URL 的开头使用本地主机 IP 发送

Posted 2023-03-28

【中文标题】使用 Axios 的 HTTP 获取请求在 URL 的开头使用本地主机 IP 发送

【英文标题】：HTTP get request with Axios gets sent with the local host IP at the beginning of the URL

【发布时间】：2018-08-04 06:09:03

【问题描述】：

我正在尝试使用 Axios 发送 HTTP 请求，但收到 404 错误。原因是请求在 URL 的开头使用本地主机 IP 发送，为什么会发生这种情况？

JS：

function getWeather() 

  axios.get('api.openweathermap.org/data/2.5/weather', 
    params: 
      lat: 30.18,
      lon: 30.87,
      appid: '57d9478bc08bc211f405f45b93b79272'
    
  )
  .then(function(response) 
    console.log(response);
  )

  .catch(function(error) 
    console.log(error);
  )
;
getWeather();  

错误：

http://127.0.0.1:5500/api.openweathermap.org/data/2.5/weather?lat=30.18&lon=30.87&appid=57d9478b#####################3b79272 404 (Not Found)

【参考方案1】：

在 Axios 的 URL 参数中，您没有指定用于 API 请求的协议（可能是 HTTP）。因此，Axios 将其解释为相对 URL 路径并添加本地服务器的路径，因为它需要完整的 URL 才能发出请求。

您可以通过添加 http:// 前缀轻松修复它：

axios.get('http://api.openweathermap.org/data/2.5/weather', 

【参考方案2】：

您可以在请求之前配置 axios 基本 url

axios.defaults.baseURL = 'http://api.openweathermap.org';
axios.get('/data/2.5/weather')

【讨论】：

axios.defaults.baseURL 如果您要将 axios 导出为 axios.create .....

【参考方案3】：

要完全控制 axios 的基本 URL，您可以在 AxiosInstance 创建时指定 baseURL：

    var getBaseUrl = () => 
        // custom base URL logic examples:
        // - to request a current URL without the search parameters part:
        let baseUrl = window.location.href.slice(0, -window.location.search.length);

        //// or to insert '/api' after the host part
        //let baseUrl = window.location.host + '/api' + window.location.pathname;

        // ensure slash at the end
        if (baseUrl[baseUrl.length - 1] != '/') baseUrl = baseUrl + '/';

        return baseUrl;
    ;

    var axiosConfig = 
        baseURL: this.getBaseUrl(),
    ;
    var axiosInstance = axios.create(axiosConfig);

    axiosInstance.get('/your-path')
       .then(res => 
           // ...
       );
       // ...