vue+axios实现跨域反向代理

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

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 全局样式表
import './assets/css/global.css'

import axios from 'axios'
Vue.prototype.$http = axios  // axios的原型更改
axios.defaults.baseURL = '/api'  // 反向代理URL

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

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

module.exports = {
    devServer: {
        open: true,  //设置自动打开
        port: 8080,  // 这个是默认端口
        proxy: {
            '/api': {
                target: 'http://localhost:80',  //设置反向代理链接
                changeOrigin: true,  //  是否跨域
                pathRewrite: {
                    '^/api': ''  //  重定向
                }
            }
        }
    }
}

 

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

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

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

 

 

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