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訪問到伺服器端獲取資料

可以在控制檯檢視獲取到的資料