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文件夾內）

 

 

注意：保存之后要重新編譯和重啟服務器