axios二次封装及跨域问题处理。

Axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service

// service.js
import axios from 'axios'

const service = axios.create({
// baseURL会自动加在接口地址上
baseURL: "/api",
timeout: 3000 // 指定请求的超时毫秒数，如果请求超过这个时间，那么请求就会中断。
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
// 在发送请求前做些什么
// 获取并设置token
// console.log(getToken('token'))
// config.headers['token'] = getToken('token')
return config
},(error) => {
// 对请求错误做些什么
return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
// 对响应数据做些什么
console.log(response)
let { status, message } = response.data
if (status !== 200) {
Message({message: message || 'error', type: 'warning'})
}
return response
}, (error) => {
// 对响应错误做点什么
return Promise.reject(error)
})

export default service

 

// main.js

import service from './service'

Vue.prototype.service = service // 挂载到原型,可在全局使用

 

跨域的处理在vue.config.js中设置代理

// vue.config.js
module.exports = {
devServer: {
open: true,
proxy: {
'/api': {
target: 'http:xxxxx',//所要处理的跨域地址
changeOrigin: true, // 允许跨域

ws: true,//针对协议为https，注意是https不是http，有加密与不加密的协议区别。
pathRewrite: {
'^/api': ''
}
}
}
}
}