聲明

1. 首先我們應(yīng)該知道

前端axios在本地發(fā)送的請(qǐng)求如果你不把路徑寫全，它都是會(huì)默認(rèn)加上自己項(xiàng)目所在的端口，就比如說：

axios.get('/login')

axios.get('/hello')

當(dāng)我點(diǎn)擊發(fā)送按鈕之后，以上兩行代碼實(shí)際為：

http://localhost:8080/login

http://localhost:8080/hello

其中 localhost:8080 就是自己項(xiàng)目所在的地址了。實(shí)際前端就會(huì)根據(jù)以上的地址來訪問后端程序了。

2. 跨域，什么是跨域呢？

首先，明白什么是同源策略？同源就是指 協(xié)議、域名、端口 都要相同，其中任何一個(gè)不同都會(huì)出現(xiàn)跨域。例如：

http://www.baidu.com:8000

// http 是協(xié)議

// www.baidu.com 是域名

// 8000 是端口

跨域，是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對(duì)JavaScript實(shí)施的安全限制。

這里說明一下，無(wú)法跨域是瀏覽器對(duì)于用戶安全的考慮。是瀏覽器的鍋。

同源策略限制了一下行為： Cookie、LocalStorage 和 IndexDB 無(wú)法讀取 DOM 和 JS 對(duì)象無(wú)法獲取 Ajax請(qǐng)求發(fā)送不出去。

前后端分離的模式下，前后端的域名是不一致的，所以就會(huì)出現(xiàn)跨域問題。

問題

當(dāng)我們開發(fā)完前端一個(gè)功能之后，需要運(yùn)行調(diào)試 ，通常前后端分離情況下，兩套程序都運(yùn)行起來之后，肯定會(huì)出現(xiàn) 協(xié)議、域名、端口不一致的形況吧。

那么前端調(diào)用后端接口時(shí)就會(huì)產(chǎn)生跨域問題。怎么辦呢？就需要代理（proxy）出場(chǎng)了。

跨域的解決方案

解決跨域的方案有很多，比如：jsonp、cors、Node代理、nginx反向代理。這里我們只討論 proxy。

vue中的proxy就是利用了Node代理。

代理服務(wù)器是如何解決跨域的？

這樣就可以串通了，前端通過axios發(fā)送請(qǐng)求時(shí)，會(huì)默認(rèn)發(fā)送給本地的特性，來發(fā)送給前端配置的代理，代理根據(jù)特定規(guī)則，將地址轉(zhuǎn)換為后端的接口，并請(qǐng)求后端接口，這樣就解決了跨域的問題了。

那前端vue中怎樣配置代理服務(wù)器呢？

proxy配置

假如我現(xiàn)在想請(qǐng)求后端的 一個(gè)接口 例如：http://www.aaabbbccc.com/login ，這樣我們應(yīng)該怎樣配置代理服務(wù)器呢？

以vue cli3.0為例

// vue.config.js
  devServer: {  //開啟代理服務(wù)器
    proxy:{
      "/api": {  // /api是自行設(shè)置的請(qǐng)求前綴，按照這個(gè)來匹配請(qǐng)求，有這個(gè)字段的請(qǐng)求，就會(huì)走到代理來。
          target: "http://www.aaabbbccc.com", // 需要代理的域名，目標(biāo)域名，會(huì)替換掉匹配字段之前的路徑
           ws: false, // 是否啟用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {  //重寫匹配的字段，如果不需要放在請(qǐng)求路徑上，可以重寫為""
              "^/api": ""
          }
      },
   
  },
  }
 
 
  //vue cli2 .0 的放在 config文件夾中的index.js  中
    dev: {
    proxyTable:{
      "/api": {
          target: "http://www.aaabbbccc.com", // 需要代理的域名
           ws: false, // 是否啟用websockets
          changeOrigin: true, //開啟跨域
          pathRewrite: {  //重寫請(qǐng)求路徑上匹配到的字段，如果不需要在請(qǐng)求路徑上，重寫為""
              "^/api": ""，
             
          }
      },
  },
  }

以上配置中，我配置了一個(gè) /api，只有包含這個(gè)請(qǐng)求的路徑才會(huì)走代理，例如：

http://localhost:8080/api/login //這個(gè)就可以走代理

http://localhost:8080/login //這個(gè)就不行

可以看到，要想所有的請(qǐng)求都進(jìn)入代理中，就必須包含/api這個(gè)路徑，那么我可以對(duì)axios進(jìn)行二次封裝，給所有的請(qǐng)求加這個(gè)前綴，代碼如下：

const requests = axios.create({
  
  baseURL:'/api', // 設(shè)置通用請(qǐng)求的地址前綴
  
  timeout:10000  //請(qǐng)求超時(shí)的時(shí)間
});
export default requests  //將requests實(shí)例，對(duì)外進(jìn)行暴露

發(fā)送請(qǐng)求可以寫為：

requests.get('/login').then((response) => {})
requests.get('/getlist').then((response) => {})
requests.get('/user/hello').then((response) => {})

此時(shí)我發(fā)送的請(qǐng)求就是：

http://localhost:8080/api/login

http://localhost:8080/api/getlist

http://localhost:8080/api/user/hello

通過代理的 target屬性 加工之后就是 ：

http://www.aaabbbccc.com/api/login

http://www.aaabbbccc.com/api/getlist

http://www.aaabbbccc.com/api/user/hello

就是把 /api 之前的路徑 修改成了 target里配置的 目標(biāo)服務(wù)器的路徑。

在通過 pathRewrite屬性 將 /api 替換為空 為：

http://www.aaabbbccc.com/login

http://www.aaabbbccc.com/getlist

http://www.aaabbbccc.com/user/hello

這樣就可以訪問到后端的對(duì)應(yīng)接口了。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論