本文適用人群：

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

問題導(dǎo)向

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

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

前端項目通過 npm run dev 運行在 localhost:8081 上，

后端項目通過 apache 運行在 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>

直接訪問后端鏈接，將能得到以下返回內(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)我們在瀏覽器中運行前端頁面，會報錯！控制臺打印如下：

可見，瀏覽器對于跨域訪問進行了限制，因為在例子中前端項目url與后端項目url的端口號不相同，所以瀏覽器攔截了我們的請求。

解決方案

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

那怎么辦咧~

其實我們可以通過配置 vue 項目中的 config/index.js 來解決問題。

將 dev 中的 proxyTable 改為如下：

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

接著，再將 vue 組件頁面中的 ajax 請求代碼改為如下：

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

重新運行 npm run dev ，運行效果如下：

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

為什么這么做？

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

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

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

當(dāng)我們在配置中這么寫時：

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

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

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

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

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

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

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

最新評論