問題

我們本地調(diào)試一般都是 npm run serve，然后打開 本機(jī)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ù)器不加限制。
  日常工作中，用得比較多的跨域方案是cors和nginx反向代理

原理

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

核心配置

1、你要 http://e.dxy.net/api/test 你可以在本地調(diào) localhost:8080/api/test，如axios.get('/api/test')

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,  //是否跨域
      }
  }
}

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 重寫為 /

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'
}