快捷導(dǎo)航

vue2中vue.config.js簡(jiǎn)單配置代理跨域的方法

更新時(shí)間：2024年01月08日 11:39:03 作者：一路向前的月光

在前后端的開(kāi)發(fā)中總是難免會(huì)遇到前后端的跨域問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue2中vue.config.js簡(jiǎn)單配置代理跨域的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

調(diào)用后端接口訪問(wèn)后臺(tái)數(shù)據(jù)，但是因?yàn)檎?qǐng)求url的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁(yè)面url不同產(chǎn)生了跨域，我們vue項(xiàng)目運(yùn)行的地址一般就是localhost 8080端口，而且后端也沒(méi)有配置允許跨域（后端如果配置跨域通常是cors），所以前端就要配置跨域，Vue跨域在vue.config.js文件里配置。

代理跨域的解決方法

方法一：

后端大哥來(lái)解決，讓前端存在跨域問(wèn)題也可以正常訪問(wèn)接口

方法二:配置代理跨域

在config.js文件中的devServer屬性下面的proxy屬性

 devServer: {
    host: 'localhost',//本地地址
    port: '8080',//端口號(hào)
    hot: true,//熱更新自動(dòng)刷新
    open: true,//自動(dòng)打開(kāi)
    overlay: {  //當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。只顯示錯(cuò)誤信息不提示警告情況限制是
      warning: false,
      error: true
    },
    proxy: {
      "/api": {
        target: 'http://xxxxxxxxxxx.com',//代理地址 凡是使用/api
        changeOrigin: true,//允許跨域請(qǐng)求
        secure: false,
        pathRewrite: { //重寫路徑 替換請(qǐng)求地址中的指定路徑
          ['^/api']: '/' //將請(qǐng)求地址中的api替換為空
        }
      }
    }
  }