問題

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

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

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

原理

vue 中的 proxy 就是利用了 Node 代理，原理還是因為服務(wù)器端沒有跨域這一說嘛，也是用了這么一個插件 地址

場景

1、假設(shè)你要調(diào)取的接口是 http://e.dxy.net/api/test，然后你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')
配置代理后，會做如下轉(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',  // 后臺接口域名
          ws: true,        //如果要代理 websockets，配置這個參數(shù)
          secure: false,  // 如果是https接口，需要配置這個參數(shù)
          changeOrigin: true,  //是否跨域
      }
  }
}

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

2、當(dāng)你調(diào)接口后端的命名沒有統(tǒng)一給接口前加 /api 這類的標(biāo)識，那么你可以自己加，也就是你可以在本地調(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',  // 后臺接口域名
          ws: true,        //如果要代理 websockets，配置這個參數(shù)
          secure: false,  // 如果是https接口，需要配置這個參數(shù)
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/api': '/'
          }
      }
  }
}

3、這個是對所有的接口都代理的，不止是檢測到 /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'
}

擴展幾個常用的devServer配置

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

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

2、devServer.publicPath
假設(shè)服務(wù)器在http://localhost:8080下運行，output.filename設(shè)置為bundle.js。默認情況下，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é)尾。

擴展幾個vue/cli3的配置

完整版本

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

最新評論