Vue-创建axios实例并实现跨域请求
.env配置文件
VUE_APP_BASE_API=/server
request.js
import axios from 'axios'
const test = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
timeout: 50000, // request timeout
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
withCredentials: true
})
export default test
创建api请求接口
import request from './request.js'
/**
* 查询所有用户信息
*/
export function list () {
return request({
url: '/all/users',
method: 'get'
})
}
配置vue.config.js代理请求
module.exports = {
devServer: {
port: 8000, // 改端口号
open: true,
proxy: {
// 以server开头的请求才会使用到该代理，即http://localhost:8000/server/query/users.
'/server': {
target: 'http://localhost:8081/', // 服务器地址
changeOrigin: true, // 开启跨域
pathRewrite: {
// 当请求以/server开头时，将其置为空 则请求最终为http://localhost:8081/query/users
'/server': ''
}
}
}
}
}
创建User.vue组件实现具体访问
……
import * as UserApi from '../api/user.js''
export default {
name: 'User',
data () {
return {
...
}
},
mounted: function () {
this.loadUser()
},
methods: {
loadUser () {
UserApi.list().then(res => {
console.log(res.data)
})
}
}
……
可以在控制台查看获取到的数据
