緣起

最近實(shí)驗(yàn)課上需要重構(gòu)以前寫過的一個(gè)項(xiàng)目（垃圾堆），需要添加發(fā)生郵件提醒的功能，記得以前寫過一個(gè)PHP版的實(shí)現(xiàn)，所以想把PHP寫的功能整理成一個(gè)服務(wù)，然后在前端調(diào)用。但是這個(gè)項(xiàng)目是JavaWeb，也就是說我需要面對(duì)跨域的問題。不過本篇文章，講的并不是如何解決這樣的跨域問題，而是我在找如何解決這個(gè)問題的路上遇到的坑。

其實(shí)，在前端工程化大行其道的現(xiàn)在，前后端已經(jīng)分離開來，前端為了提高工作流效率往往自己開一個(gè)小型的服務(wù)器，就比如webpack.devServer。這樣在前端調(diào)用后端接口的時(shí)候必然會(huì)面臨跨域的問題，如題，Vue-cli 3.x + axios 跨域方案 就是解決這里的跨域問題。這里的跨域是基于webpack的devServer的代理功能（proxy）來實(shí)現(xiàn)開發(fā)環(huán)境中的跨域，也就是說本篇所討論的并不能解決生產(chǎn)環(huán)境下的跨域問題，因?yàn)閣ebpack.devServer是DevDependencies，一旦打包上線，這個(gè)proxy代理就會(huì)失效。但是這并不妨礙我們開發(fā)中使用跨域來提高開發(fā)效率和體驗(yàn)。

開始填坑

其實(shí)這個(gè)問題解決起來很簡單，網(wǎng)上也是很多教程，為了文章完整性，我這里也做一個(gè)盡量完備的展示，介紹如何配置Vue-cli 3.x來實(shí)現(xiàn)跨域 。

vue.config.js中devServer.proxy的配置解析

Vue-cli3.x比Vue-cli2.x構(gòu)建的項(xiàng)目要簡化很多，根目錄下只有./src和./public文件夾，所以網(wǎng)上很多教程說config目錄下的vue.config.js是說的vue-cli 2.x版本。那么對(duì)于Vue-cli 3.x版本，構(gòu)建也很簡單，直接在根目錄里建一個(gè)vue.config.js配置文件就可以了，我們直接看devServer.proxy里的代碼:

我這里devServer的地址是：localhost:8080/，需要代理的地址是：localhost/index/phpinfo.php （我自己寫的一個(gè)測試跨域用的php，返回一個(gè)‘ok'）

下面是根據(jù)上面的地址需要配置的proxy對(duì)象

devServer : {    proxy : {      '/index' : {        target : 'http://localhost/index',        // ws : true,        changeOrigin : true,        pathRewrite : {          '^/index' : ''        }      }    }  }

大部分教程到這里就停止了，但是我在這里做一個(gè)擴(kuò)展，為了讓讀者理解這里的配置是如何起作用的（以下內(nèi)容整理自http-proxy-middleware的npm描述里，http-proxy-middleware是一個(gè)npm模塊，是proxy的底層原理實(shí)現(xiàn)）。

     foo://example.com:8042/over/there?name=ferret#nose     /_/  /______________//_________/ /_________/ /__/     |      |      |      |    |    scheme   authority    path    query  fragment

以我上面的配置為例，'/index'這個(gè)key在http-proxy-middleware中被稱為context——用來決定哪些請(qǐng)求需要被target對(duì)應(yīng)的主機(jī)地址（這里是http://localhost/index）代理，它可以是 字符串，含有通配符的字符串，或是一個(gè)數(shù)組，分別對(duì)應(yīng)于path matching(路徑匹配)wildcard path matching(通配符路徑匹配)multiple path matching(多路徑匹配)，而這里的path指的就是上圖所標(biāo)識(shí)的path段。