緣起

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

其實，在前端工程化大行其道的現(xiàn)在，前后端已經(jīng)分離開來，前端為了提高工作流效率往往自己開一個小型的服務器，就比如webpack.devServer。這樣在前端調(diào)用后端接口的時候必然會面臨跨域的問題，

如題，Vue3.x + axios 跨域方案 就是解決這里的跨域問題。這里的跨域是基于webpack的devServer的代理功能（proxy）來實現(xiàn)開發(fā)環(huán)境中的跨域，也就是說本篇所討論的并不能解決生產(chǎn)環(huán)境下的跨域問題，因為webpack.devServer是DevDependencies，一旦打包上線，這個proxy代理就會失效。但是這并不妨礙我們開發(fā)中使用跨域來提高開發(fā)效率和體驗。

開始填坑

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

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

Vue3.x的CLI工具比Vue2.x的CLI工具構建的項目要簡化很多，根目錄下只有./src和./public文件夾，所以網(wǎng)上很多教程說config目錄下的vue.config.js是說的vue2.x版本。那么對于Vue3.x版本，構建也很簡單，直接在根目錄里建一個vue.config.js配置文件就可以了，我們直接看devServer.proxy里的代碼:

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

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

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

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

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