axios踩坑記錄+攔截器使用+vue cli代理跨域proxy+webpack打包部署到服務器

一、小小的提一下vue cli腳手架前端調後端數據接口時候的本地代理跨域問題，如我在本地localhost訪問接口http://40.00.100.100:3002/是要跨域的，至關於瀏覽器設置了一道門檻，會報錯XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 爲何跨域同源非同源本身去查吧，在webpack配置一下proxyTable就OK了。

　　以下 ：config/index.js

dev: { //proxyTable參數加入如下
 proxyTable: { '/api': { target: 'http://40.00.100.100:3002/',//設置你調用的接口域名和端口號 別忘了加http
        changeOrigin: true, pathRewrite: { '^/api': '/'//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們調接口時直接用api代替，好比我要
調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可，可是實際接口是沒有/api的，因此須要重寫
 } } },

　　試一下，跨域成功了，可是注意了，這只是開發環境（dev）中解決了跨域問題，生產環境中真正部署到服務器上若是是非同源仍是存在跨域問題，如咱們部署的服務器端口是3001，須要先後端聯調，第一步前端咱們能夠分生產production和開發development兩種環境分別測試，在config/dev.env.js和prod.env.js裏也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中咱們用上面配置的代理地址api，生產環境下用正常的接口地址，因此這樣配置

module.exports = merge(prodEnv, { NODE_ENV: '"development"',//開發環境
  API_HOST:"/api/" })

module.exports = { NODE_ENV: '"production"',//生產環境
  API_HOST:'"http://40.00.100.100:3002/"' }

　　固然不論是開發仍是生產環境均可以直接請求http://40.00.100.100:3002/。配置好以後測試時程序會自動判斷當前是開發仍是生產環境，而後自動匹配API_HOST，咱們在任何組件裏都能用process.env.API_HOST來使用地址如

instance.post(process.env.API_HOST+'user/login', this.form)

　　而後第二步後端服務器配置一下cros跨域便可，就是access-control-allow-origin：*容許全部訪問的意思。

　　綜上：開發的環境下咱們前端能夠本身配置個proxy代理就能跨域了，真正的生產環境下還須要後端的配合的。某大神說：此方法ie9及如下很差使，若是須要兼容，最好的辦法是後端在服務器端口加個代理，效果相似開發時webpack的代理。

二、axios不支持vue.use()方式聲明使用，看了全部近乎相同的axios文檔都沒有提到這一點，建議方式

//在main.js中以下聲明使用
import axios from 'axios'; Vue.prototype.$axios=axios; //那麼在其餘vue組件中就能夠this.$axios調用使用

三、axios發送get/post請求問題

　　發送post請求時通常都要設置Content-Type，發送內容的類型。

　　application/json指發送json對象，可是要提早stringify一下。

　　application/xxxx-form指發送?a=b&c=d格式，能夠用qs的方法格式化一下，qs在安裝axios後會自動安裝，只須要組件裏import一下便可。

const postData=JSON.stringify(this.formCustomer); 'Content-Type':'application/json'} const postData=Qs.stringify(this.formCustomer);//過濾成？&=格式
'Content-Type':'application/xxxx-form'}

四、axios攔截器的使用

　　當咱們訪問某個地址頁面時，有時會要求咱們從新登陸後再訪問該頁面，也就是身份認證失效了，如token丟失了，或者是token依然存在本地，可是卻失效了，因此單單判斷本地有沒有token值不能解決問題。此時請求時服務器返回的是401錯誤，受權出錯，也就是沒有權利訪問該頁面。咱們能夠在發送全部請求以前和操做服務器響應數據以前對這種狀況過濾。

// http request 請求攔截器，有token值則配置上token值
axios.interceptors.request.use( config => { if (token) {  // 每次發送請求以前判斷是否存在token，
　　　　　　　　　　　　　若是存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
            config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服務器響應攔截器，這裏攔截401錯誤，並從新跳入登頁從新獲取token
axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 這裏寫清除token的代碼
 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登陸成功後跳入瀏覽的當前頁面
 }) } } return Promise.reject(error.response.data) });

五、如何將Vue項目放置在服務器上，這裏以Tomcat爲例：

　　必需要配置的就是在vue-cli webpack的模板下的/config/index.js，咱們能夠看到assetsPublicPath這個鍵，而且這個東西還出現了兩次，我第一次打包的時候，只是修改了最下面的assetsPublicPath，將它從'/'變爲了./，而後我就執行了npm run build，打包成功以後，能夠看到項目中會多出來一個文件夾，就是dist，裏面有一個static文件夾和index.html，而後我就將dist目錄下的文件拷貝到Tomcat服務器下，會發現訪問到的是一個空白頁面，而後瀏覽器會報不少404錯誤，其實就是index.html文件引入的那些js文件路徑不匹配致使。可是當我把它放在..\webapps\ROOT目錄下，它就能夠訪問了。（Tomcat下面的目錄結構如上圖）可是這確定是不行的，而後我就開始尋找答案，也根據別人的一些步驟作了下來，後來發現仍是有一些問題的，沒有辦法訪問到主頁面，雖然吧，一直都沒成功，可是我也沒放棄，而後就綜合了一下問答裏面別人說的，進行了幾回嘗試，最後成功了。我就改了兩處，就是assetsPublicPath所對應的值，我這裏用的是./，我也用webapps下的命的項目名試過，只是沒獲得我想要的結果，後來我仍是改爲了./。