vue.config.js配置代理處理跨域


vue.config.js 是一個可選的配置文件,如果項目的(和 package.json 同級的) 根目錄中存在這個文件,那么它會被 @vue/cli-service 自動加載。

代理的配置很多,差不多都是這樣

module.exports = {
  devServer: {
    proxy:{
      '/api':{
          target:'http://localhost:9000',
          secure:false,
          changeOrigin:true,
          pathRewrite:{
              '^/api':'/'
          }
      }
    }
  }
}

然后在main.js中配置如下

Vue.prototype.$http = axios
axios.defaults.baseURL = '/api'

引入axios之后,axios是無法被其他組件使用的,這時候要將 axios 改寫為 Vue 的原型屬性,也就是Vue.prototype.$http
axios.defaults.baseURL的值要配置成代理的值

然后就可以在組件中訪問接口了

await this.$http.post('/user/login', 數據)

后面改進還需要把接口都封裝起來,一次性並發請求多個

參考方案如下:
vue.config.js配置跨域 - 為夢l - 博客園
配置參考 | Vue CLI
vue-cli 引入axios及跨域使用
vue中引入了axios 配置了axios.defaults.baseUrl,但是啟動訪問接口的時候直接是訪問成vue默認的端口怎么解決
評論區:你要是改請求地址,在代理服務器修改 vue.config.js文件
這里寫你調用接口的基礎路徑,來解決跨域,如果設置了代理,那你本地開發環境的axios的baseUrl要寫為 '' ,即空字符串
devServer: {
proxy: 'localhost:3000'
}
求助大佬們!為什么我用vue.config.js的proxy處理跨域失敗!參考了他的寫法,才明白上面那個回答是什么意思


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM