自從vue2.0不再更新vue-resource执解，便出現(xiàn)了axios，這里附上axios的官網：https://www.npmjs.com/package/axios纲酗，里面的文檔也很詳細衰腌，安裝這里就不說了，大家可以自己去官網看看觅赊，今天主要講講axios的跨域解決方法右蕊。
解決的方式有兩種：
一、讓后端設置CORS吮螺，允許我們請求饶囚。
二、前端在webpack中設置proxyTable{}代理鸠补。
我們今天著重講第二種：proxyTable{}代理萝风。
前端的地址為http://localhost:8080，后端的接口地址是http://www.sener.com/login紫岩， 這就違反了瀏覽器的同源策略规惰，所以會報如下錯誤提示，
http狀態(tài)碼為403（權限不足）：
打開vue項目config文件夾下的index.js在里面把proxyTable: {}設置成下面的：
proxyTable: {
? ? ? '/api': {
? ? ? ? target: 'http://www.sener.com', // 接口的域名
? ? ? ? // secure: false,? // 如果是https接口泉蝌，需要配置這個參數(shù)
? ? ? ? changeOrigin: true, // 如果接口跨域歇万，需要進行這個參數(shù)配置
? ? ? ? pathRewrite: {
? ? ? ? ? '^/api': ''? ? ? ?//這是一個通配符，設置完了之后每個接口都要在前面加上/api（特別注意這一點）
? ? ? ? }
? ? ? }
? ? },
接口調用方法：
axios.post("/api/login", {
? ? ? ? ? userName: "zhangsan",
? ? ? ? ? password: "111111"
? ? ? }).then(function (response) {
? ? ? ? console.log(response);
? ? ? }).catch(function (err) {
? ? ? ? console.log(err);
? ? ? });
寫完后重啟項目勋陪，應該就可以代理成功了贪磺。
至于為什么會存在跨域這個問題，以下是我個人的一點理解诅愚，希望各位大佬可以提提建議寒锚。
首先，axios 發(fā)送請求時的數(shù)據(jù)默認是 JSON 格式的，這是導致用 axios POST 跨域出錯的主要原因壕曼。
根據(jù) CORS 的標準苏研，當瀏覽器發(fā)送跨域請求時，如果請求不是GET或者特定POST（Content-Type只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain的一種）時腮郊，強烈要求瀏覽器必須先以 OPTIONS 請求方式發(fā)送一個預請求(preflight request)摹蘑，從而獲知服務器端對跨源請求所支持 HTTP 方法。
所以轧飞，使用 axios 直接發(fā)送 POST 的跨域請求衅鹿，如果web后端對 OPTIONS 的響應有問題，就會報錯过咬。
至于為何 XHR 可以大渤，我覺得跟form-urlencoded這種數(shù)據(jù)格式有關。
這里附上CORS的補充：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#
