在使用AXIOS发送请求时,代码如下:

axios({
    method: "GET",
    url:"127.0.0.1:3000/upload"
  });

但是在发送请求时出现如下报错并发现请求路径并不是预期路径

 前面莫名其妙添加上了http://localhost:1024,记住这个根路径,后面会提到

这时网上告诉我们需要写完整路径或者配置axios.config.baseURL来解决。这里我详细研究了原因

我首先想到的是axios对我的请求路径进行了拼接。找到对应代码如下

    const fullPath = buildFullPath(config.baseURL, config.url);

    request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);

这里的fullPath由基础路径和配置路径进行拼接得到(就是axios.default.baseURL和发送axios请求时的配置的url。),buildFullPath内部会判断配置的url是否是相对路径在进行拼接   buildFullPath函数如下想研究的可以看一下:

function buildFullPath(baseURL, requestedURL) {
  console.log(isAbsoluteURL(requestedURL));
  if (baseURL && !isAbsoluteURL(requestedURL)) {
    return combineURLs(baseURL, requestedURL);
  }
  return requestedURL;
}

function isAbsoluteURL(url) {
  // A URL is considered absolute if it begins with "<scheme>://" or "//" (protocol-relative URL).
  // RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed
  // by any combination of letters, digits, plus, period, or hyphen.
  return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url);
}

function combineURLs(baseURL, relativeURL) {
  return relativeURL
    ? baseURL.replace(/\/+$/, '') + '/' + relativeURL.replace(/^\/+/, '')
    : baseURL;
}

根据正则‘/^([a-z][a-z\d+\-.]*:)?\/\//i’ (1.开头必须是‘//’  2.字母开头,后跟任意位字母、数字、加减号、点。之后是’://‘)判断出我的url/localhost:3000/api是一个相对url,但是因为没有传入baseURL,所以buildFullPath并不会做任何事。

并且在内部打印出fullPath,显示的仍然是预期路径。

所以和axios并没有关系。答案揭晓:

axios请求本地路径如"localhost:3000/api"时判断为一个相对路径,axios想拼接baseURL,但是baseURL又没有配置,这时会直接由浏览器发送一个url为相对路径的请求。浏览器默认 请求是相对路径时会拼接上发送请求的地址的根路径(比如发送请求的页面是手脚架环境,运行在http://localhost:1024/ ,就会把这个根路径和发送请求的相对路径进行拼接,又或者是本地打开的页面地址是file:///c:/.../a.html,就会把file://拼接上),所以会出现file://localhost:3000/api这种错误路径。本质不是axios的原因

测试的使用原生js发送xhr请求时,仍然会出现这种情况,所以这并不是axios的原因

        const xhr=new XMLHttpRequest();
        xhr.open('post','/api')
        xhr.send()

 这是我的文件路径,确实拼接上了file://

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐