什么axios跨域
当请求不同协议、域名、端口即为跨域
如何配置跨域
1.在vue中，项目目录下创建一个
vue.config.js 文件
module.exports = {
devServer: {
///端口号：8081
port: 8081,
////配置跨域
proxy: {
////匹配api开头请求
"/api": {
///代理地址 /跨域地址
target: "http://mengxuegu.com:9999/pro-api",
//开启代理
changeOrigin: true,
///
pathRewrite: {
"^/api": ""
}
},
/////可用多个配置
// "/dev-api": {
// ///代理地址 /跨域地址
// target: "http://mengxuegu.com:9992/pro-api",
// //开启代理
// changeOrigin: true,
// ///
// pathRewrite: {
// "^/dev-api": ""
// }
// },
}
}
}
配置拦截器
1.在vue中，src目录下面创建一个utils (工具)文件夹 在utils文件夹中创建一个request.js 文件 2.reque.js 文件中配置axios 拦截器 import axios from 'axios' ////创建一个实例对象为axios对象 const request=axios.create({ baseURL:'/', timeout:5000 ///请求超时时间
}
////请求拦截
request.interceptors.request.use(config=>{
///在发送请求之前做什么
return config
},error=>{
///在请求失败做什么
return Promise.reject(error)
})
///响应拦截
request.interceptors.response.use(response=>{
//在响应成功之前做什么
return response
},error=>{
//在响应失败做什么
return Promise.reject(error)
})
///导出request （axios实例）对象
export default request
配置axios接口
1.在vue中，src目录下面创建一个api (接口)文件夹
在api 文件夹中创建一个api.js文件
2.在api.js 文件中配置接口信息
///引入axios拦截器
import request from '../utils/requset'
///变量来存储vue.config.js 文件中"/aip" 配置的跨域请求
const BASE_URL="/api"
export default ({
/////请求列表接口
getList(){
return request({
type:'get',
url:BASE_URL+'bd.json'
})
}
////登录验证 mobile,password 形参来获取登录接口的数据
login(mobile,password){
return request({
url:BASE_URL+'/user/login',
////请求方式 post 请求
method:'post',
////接收数据
data :{
mobile,
password
}
})
},
////token 验证
getInfo(token){
return request({
method:'get',
///ES6模板字符串拼接 变量用${}来接收
url:BASE_URL+`/user/info/${token}`
})
}
})
3.在需要的组件引用api配置接口即可
