跨域的徹底講解

什麼是跨域,爲何會跨域？

產生跨域的緣由，在前臺的接口，不在同一個域名下就會產生跨域。

1.瀏覽器的限制，出於安全的考慮，產生跨域不會讓請求經過，可是後端是不會報錯的

2.協議，域名，端口，任何一個不同都會產生跨域

3.請求是XHR請求，若是不是XHR請求，就算跨域，瀏覽器也不會報錯

解決方案以下：

接口準備：http://m.kugou.com/?json=true  酷狗音樂的音樂列表接口

解決方案一：

　　使用JSONP，JSONP請求是動態的建立了script標籤來進行請求，後端也須要去進行改動，不然會當作是JSON處理，從而報錯，JSONP返回的

應該是一個JS。

　　JSONP請求的弊端：

　　　　1.服務器須要進行同步改動

　　　　2.JSONP只支持get請求方法

　　　　3.發送的不是XHR請求 

解決方案二： 

　　關於vue-cli 中請求代理的配置

 proxyTable: { "/proxy/": { target: "http://m.kugou.com", "secure": false, "changeOrigin": true, "pathRewrite": { "^/proxy": "" }, "headers": { "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36" } } },

　　在項目的config/index.js中，dev裏面有個 proxyTable，在裏面寫上代理的詳細信息。

　　/proxy/開頭的請求，都會使用target的域名進行請求，

　　secure中 false 爲 http請求，true爲https請求

　　changeOrigin 爲true 能夠進行跨域請求

　　pathRewrite 的^/proxy 爲在地址後面拼接別的地址

　　headers 的 User-Agent 爲 請求的UA，能夠寫手機的UA，這樣去模擬手機請求

　　頁面請求方式 直接在url 中寫入 /proxy/rank/list?json=true

 

 

　　持續更新中。。。