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