Vue跨域访问后端接口测试

文章目录

一、文件修改config/index.jsmain.jsApp.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