vue+axios实现跨域反向代理

关于跨域反向代理的研究，更改main.js和新建vue.config.js

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import router from './router'
 4 import './plugins/element.js'
 5 // 全局样式表
 6 import './assets/css/global.css'
 7 
 8 import axios from 'axios'
 9 Vue.prototype.$http = axios  // axios的原型更改
10 axios.defaults.baseURL = '/api'  // 反向代理URL
11 
12 Vue.config.productionTip = false
13 
14 new Vue({
15   router,
16   render: h => h(App)
17 }).$mount('#app')

main.js

vue.config.js //必须放在根目录下

 1 module.exports = {
 2     devServer: {
 3         open: true,  //设置自动打开
 4         port: 8080,  // 这个是默认端口
 5         proxy: {
 6             '/api': {
 7                 target: 'http://localhost:80',  //设置反向代理链接
 8                 changeOrigin: true,  //  是否跨域
 9                 pathRewrite: {
10                     '^/api': ''  //  重定向
11                 }
12             }
13         }
14     }
15 }

　　问题一：设置反向代理成功了为什么还是报错误呢？

　　答：反向代理设置完成之后，会向你设置的代理目录读取文件

　　　　例如：如果是phpstudy，会直接在网站根目录寻找文件，需要将php文件放入根目录内（我设置的根目录是WWW文件夹内）

注意：保存之后要重新编译和重启服务器