使用axios时路径自动出现一个根路径,形如http://localhost:1024/localhost:3000/api

在使用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://

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值