本文適用人群：

• 會(huì)使用 vue-cli 搭建一個(gè)基本的 vue webpack 項(xiàng)目，本文的目錄結(jié)構(gòu)基于 webpack 模板結(jié)構(gòu)
• 懂得 axios 基本用法

問(wèn)題導(dǎo)向

日常開(kāi)發(fā)中，前端經(jīng)常需要通過(guò) ajax 從后端獲取數(shù)據(jù)。而在這種前后端分離的開(kāi)發(fā)模式下，往往前端項(xiàng)目與后端項(xiàng)目的 IP地址、端口號(hào)、協(xié)議 大概率是不一樣的，由于瀏覽器的安全策略設(shè)定，不進(jìn)行相應(yīng)配置的話，前端的請(qǐng)求就會(huì)被瀏覽器攔截掉啦。

假設(shè)某個(gè)頁(yè)面組件在加載的時(shí)候會(huì)向后端發(fā)送一個(gè)請(qǐng)求，然后根據(jù)返回的結(jié)果來(lái)渲染頁(yè)面。代碼示例如下：

前端項(xiàng)目通過(guò) npm run dev 運(yùn)行在 localhost:8081 上，

后端項(xiàng)目通過(guò) apache 運(yùn)行在 localhost/test/public/api/books 上

<template>
 <div class="hello">
 <ul>
  <li v-for="book of books">{{book.name}}</li>
 </ul>
 </div>
</template>
<script>
 import axios from 'axios';
 export default {
 name: 'HelloWorld',
 data() {
  return {
  books: []
  }
 },
 created(){
  let self = this;
  axios.get("http://localhost/test/public/api/books")
  .then((response)=>{
  self.books = response.data;
  });
 }
 }
</script>

直接訪問(wèn)后端鏈接，將能得到以下返回內(nèi)容：

[
 {"name":"javascript \u4ece\u5165\u95e8\u5230\u653e\u5f03"},
 {"name":"\u9888\u690e\u75c5\u5eb7\u590d\u6307\u5357"},
 {"name":"\u89c6\u529b\u4fdd\u62a4\u6307\u5357"}
]

但是當(dāng)我們?cè)跒g覽器中運(yùn)行前端頁(yè)面，會(huì)報(bào)錯(cuò)！控制臺(tái)打印如下：

可見(jiàn)，瀏覽器對(duì)于跨域訪問(wèn)進(jìn)行了限制，因?yàn)樵诶又星岸隧?xiàng)目url與后端項(xiàng)目url的端口號(hào)不相同，所以瀏覽器攔截了我們的請(qǐng)求。

解決方案

解決方式有很多種，包括可以很簡(jiǎn)單粗暴地讓后端代碼設(shè)置一個(gè) Access-Control-Allow-Origin 頭來(lái)解決這個(gè)問(wèn)題。但是，在實(shí)際開(kāi)發(fā)中，后端的小哥哥們才不會(huì)理會(huì)你這個(gè)羞恥的小請(qǐng)求呢~

那怎么辦咧~

其實(shí)我們可以通過(guò)配置 vue 項(xiàng)目中的 config/index.js 來(lái)解決問(wèn)題。

將 dev 中的 proxyTable 改為如下：

proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 changeOrigin: true,
 pathRewrite: {
  '^/api': ''
 }
 }
},

接著，再將 vue 組件頁(yè)面中的 ajax 請(qǐng)求代碼改為如下：

// 改為這樣，原來(lái)是這樣：axios.get("http://localhost/test/public/api/books")
axios.get("/api/books")

重新運(yùn)行 npm run dev ，運(yùn)行效果如下：

當(dāng)當(dāng)當(dāng)！成功！

為什么這么做？

當(dāng)我們打開(kāi)瀏覽器的開(kāi)發(fā)者工具查看一下網(wǎng)絡(luò)請(qǐng)求就會(huì)發(fā)現(xiàn)，這個(gè) ajax 請(qǐng)求竟然是向我們前端的 webpack-dev-server 發(fā)送的：

而且居然能返回正確的數(shù)據(jù)？？？

瀏覽器有安全策略限制，但是第三方的服務(wù)(服務(wù)器)沒(méi)有呀，所以我們可以通過(guò)讓瀏覽器訪問(wèn)前端開(kāi)發(fā)服務(wù)器的url，讓前端開(kāi)發(fā)服務(wù)器去向后端服務(wù)器發(fā)送請(qǐng)求，再返回?cái)?shù)據(jù)給瀏覽器，這樣子就不存在跨域問(wèn)題啦。

當(dāng)我們?cè)谂渲弥羞@么寫(xiě)時(shí)：

proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 }
},

對(duì)于8081端口的開(kāi)發(fā)服務(wù)器而言，所有以 /api 開(kāi)頭的 uri 都會(huì)被轉(zhuǎn)發(fā)到 http://localhost/test/public/api/ ，

也就是說(shuō)，在瀏覽器中訪問(wèn) localhost:8081/api/books ，前端開(kāi)發(fā)服務(wù)器就會(huì)向 http://localhost/test/public/api/api/books 請(qǐng)求數(shù)據(jù)。就是簡(jiǎn)單粗暴地在 target 之后拼接上當(dāng)前的uri。

會(huì)發(fā)現(xiàn)這樣子做，實(shí)際的 url 中多了一個(gè) /api ，不滿足我們的需求，所以可以通過(guò) pathRewrite 將這幾個(gè)字符串替換掉。

// 將 "/api" 開(kāi)頭的 url 中的 "api" 替換成 空
proxyTable: {
 '/api': {
 target: 'http://localhost/test/public/api/',
 pathRewrite: {
  '^/api': ''
 }
 }
},
// 根據(jù)上面的規(guī)則
// 當(dāng)在瀏覽器訪問(wèn) localhost:8081/api/books
// 則實(shí)際訪問(wèn)的是 http://localhost/test/public/api/books
// 假設(shè)設(shè)置成 
pathRewrite: {'^/api': '/somethingnew'}
// 當(dāng)在瀏覽器訪問(wèn) localhost:8081/api/books
// 則實(shí)際訪問(wèn)的是 http://localhost/test/public/somethingnew/books

而配置項(xiàng) changeOrigin: true 則是設(shè)置了前端開(kāi)發(fā)服務(wù)器向后端發(fā)送請(qǐng)求時(shí) HTTP 包中的 HOST 字段。當(dāng)設(shè)置為 true 時(shí)，HOST 會(huì)被設(shè)置成目標(biāo)地址(target)中的主機(jī)。當(dāng)后端服務(wù)器是虛擬主機(jī)時(shí)，這個(gè)選項(xiàng)顯得尤為重要，或者說(shuō)，同一個(gè)IP綁定了多個(gè)服務(wù)器服務(wù)時(shí)顯得尤為重要。不設(shè)置的話，可能會(huì)導(dǎo)致請(qǐng)求不到數(shù)據(jù)。

更多的 proxyTable 可用參數(shù)可以參考 http-proxy-middleware 的文檔

最新評(píng)論