Vue-创建axios实例并实现跨域请求（完整过程-前端）

Posted 2020-12-19 code duck

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组件实现具体访问

<template>
    ……
</template>
<script>
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)
      })
    }
}
</script>

<style scoped>
……
</style>

前端访问地址为：http://localhost:8000/server/query/users

会被代理解析为：http://localhost:8081/query/users访问到服务器端获取数据

可以在控制台查看获取到的数据