方法一
http.js
路径:vuetemp\src\request\http.js
import axios from 'axios' // 引入axios
// import QS from 'qs' // 引入qs模块,用来序列化post类型的数据
// import { MessageBox, Message } from 'element-ui' // 引入element-ui消息提示
// 环境的切换
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '/api' //重点!!!!!
// http://127.0.0.1:8801
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = '/api'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '/api'
}
// 超过了时间,就会告知用户当前请求超时,请刷新,单位ms
axios.defaults.timeout = 15000
// post请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// axios.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8'
axios.defaults.headers.post['Access-Control-Allow-Origin'] = 'http://localhost:8889'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// const token = 'xxxxxjjjjjssss'
// token && (config.headers.Authorization = token)
config.headers.Authorization = 'tokenssss'
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log(response.data, '网络正常')
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
export default axios
main.js
// axios 前后端交互
import axios from '@/request/http.js'
// axios 前后端交互
Vue.prototype.$axios = axios
index.js
位置:vuetemp\config\index.js
//解决跨域
proxyTable: {
'/api': {
target: 'http://localhost:8889',//后端地址
changeOrigin: true,
pathRewrite: {
'^/api': '/' //重点!!!!!
}
}
},
在方法内访问
toService () {
this.$axios({
method: 'post',
url: '/image/imageData/', // 接口地址,后端 @PostMapping("/")
data: {
keyword: '1' // 传接口参数
}
}).then(response => {
console.log(response, 'success') // 成功的返回
}).catch(error => console.log(error, 'error'))
}