In the vue project, it is often necessary to use the request interceptor of axios, in which the judgment of the environment and the splicing of the correct url address can be realized, as follows:
scene reappearance
// http.js
// 请求拦截
axios.interceptors.request.use(
config => {
if (process.env.NODE_ENV === 'development') {
config.url = 'http://xxx.xx.xx.xxx:8080'+config.url;
} else if (process.env.NODE_ENV === 'production') {
// config.url = getUrl() + config.url; // 线上打包地址
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截
axios.interceptors.response.use(
response => {
return response
},
error => {
console.log(error)
ElMessage.error('请求失败，请检查网络!')
}
)
// 封装get方法
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}
When using, in api.js
import {
get } from './http'
export const listSource = params => get('/frame/prediction/listSource', params)
The above method is a commonly used encapsulation method in Vue projects, but later in the process of using it, I found a strange problem. When calling different interfaces, only the parameters of the url are different. Some interfaces can be called normally, and some interfaces cannot. call normally.
The performance is: there is no call record in the network, and the response interceptor directly reports "request failed, please check the network"
After many investigations, it was once suspected that there was a problem with the vue request interceptor itself. After unremitting attempts, it was finally locked on the result of url splicing, but the print result of config.url in the request interceptor was also normal. .
Finally, try to reassign axios.defaults.baseURL outside the interceptor, such as
axios.defaults.baseURL = 'http://xxx.xx.xx.xxx:8080'
// 请求拦截
axios.interceptors.request.use(
config => {
if (process.env.NODE_ENV === 'development') {
// config.url = 'http://xxx.xx.xx.xxx:8080'+config.url;
} else if (process.env.NODE_ENV === 'production') {
// config.url = getUrl() + config.url; // 线上打包地址
}
return config
},
error => {
return Promise.reject(error)
}
)
At this time, the listSource interface finally has a performance in the network, and finally found the problem
focus
As can be seen from the above figure, there are many characters that should not appear in the url. I only found out through Baidu that it is because the url I copied has a blank url code %E2%80%8B. The blank code has no width, although I can't see it but it will affect the result. I can't match the url correctly, so enlightening! ! ! !
Solution: delete the copied url (with quotation marks), and type it again by yourself