Vue跨域访问后端接口测试

一、文件修改

config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
          target: 'http://localhost:8888/',  /* 修改成请求的目标域名和端口 */
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      },
      ......

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = Axios
Vue.prototype.IP_PORT = '/api'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    /* 在此进行get/post跨域请求 */
    this.$axios.post(this.IP_PORT + '/book/name', {param: 'Java'}).then(data => {
      console.log('data', data)
    })
  }
}
</script>

二、执行命令

npm install
npm install axios
npm run dev