問(wèn)題

我們本地調(diào)試一般都是 npm run serve，然后打開 本機(jī)ip:8080（localhost:8080）對(duì)吧，這時(shí)候我們要調(diào)接口調(diào)試，后端的接口的地址可能在測(cè)試環(huán)境，也可能是自己電腦的 ip，總之不是你的 lcoalhost:8080，那么你調(diào)接口就會(huì)產(chǎn)生跨域，那么怎么辦呢？就需要proxy出場(chǎng)了

復(fù)習(xí)一下跨域的解決方案

• jsonp
• cors
• Node中間件代理(兩次跨域)
• nginx反向代理
• CORS支持所有類型的HTTP請(qǐng)求，是跨域HTTP請(qǐng)求的根本解決方案
• JSONP只支持GET請(qǐng)求，JSONP的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)。
• 不管是Node中間件代理還是nginx反向代理，主要是通過(guò)同源策略對(duì)服務(wù)器不加限制。

原理

vue 中的 proxy 就是利用了 Node 代理，原理還是因?yàn)榉?wù)器端沒(méi)有跨域這一說(shuō)嘛，也是用了這么一個(gè)插件 地址

場(chǎng)景

1、假設(shè)你要調(diào)取的接口是 http://e.dxy.net/api/test，然后你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')
配置代理后，會(huì)做如下轉(zhuǎn)發(fā)：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/bcma/api/test -> http://e.dxy.net/bcma/api/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后臺(tái)接口域名
          ws: true,        //如果要代理 websockets，配置這個(gè)參數(shù)
          secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
          changeOrigin: true,  //是否跨域
      }
  }
}

有新手朋友可能會(huì)問(wèn)：這樣做是不是只是本地調(diào)試這樣做，線上怎么辦呢？
我們一般調(diào)接口 axios.get('/api/test')，這樣調(diào)是自動(dòng)請(qǐng)求的當(dāng)前域名，也就是本地就調(diào)用 localhost:8080，到了線上就是你們自己的服務(wù)域名，所以這個(gè)只是為了本地調(diào)試使用。當(dāng)然，如果你要同時(shí)調(diào)用很多個(gè)不同的域名服務(wù)，那你調(diào)用的時(shí)候就要把相關(guān)的域名明確寫出來(lái)，如axios.get('http://e.dxy.net/api/test')

2、當(dāng)你調(diào)接口后端的命名沒(méi)有統(tǒng)一給接口前加 /api 這類的標(biāo)識(shí)，那么你可以自己加，也就是你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')，而你要的目標(biāo)接口是 http://e.dxy.net/test，你就可以用 pathRewrite，遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重寫為 /。
所以轉(zhuǎn)發(fā)效果就是：
localhost:8080/api/test -> http://e.dxy.net/test

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://e.dxy.net',  // 后臺(tái)接口域名
          ws: true,        //如果要代理 websockets，配置這個(gè)參數(shù)
          secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

3、這個(gè)是對(duì)所有的接口都代理的，不止是檢測(cè)到 /api 的接口，比如：
localhost:8080/api/test -> http://e.dxy.net/api/test
localhost:8080/test -> http://e.dxy.net/test

devServer: {
 proxy: 'http://e.dxy.net'
}

擴(kuò)展幾個(gè)常用的devServer配置

完整版
1、 devServer.disableHostCheck
當(dāng)設(shè)置為true時(shí)，此選項(xiàng)將繞過(guò)主機(jī)檢查。不建議這樣做，因?yàn)椴粰z查主機(jī)的應(yīng)用程序容易受到DNS重新綁定攻擊。

module.exports = {
  //...
  devServer: {
    disableHostCheck: true
  }
};

2、devServer.publicPath
假設(shè)服務(wù)器在http://localhost:8080下運(yùn)行，output.filename設(shè)置為bundle.js。默認(rèn)情況下，devServer.publicPath是/，所以您的包可以作為http://localhost:8080/bundle.js 使用。將devServer.publicPath更改為 /assets/ 就變?yōu)?http://localhost:8080/assets/bundle.js

module.exports = {
  //...
  devServer: {
    publicPath: '/assets/'
  }
};

確保devServer.publicPath始終以正斜杠開頭和結(jié)尾。

擴(kuò)展幾個(gè)vue/cli3的配置

完整版本

到此這篇關(guān)于詳解vue中的代理proxy的文章就介紹到這了,更多相關(guān)vue代理proxy內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論