Vue 前端跨域的解決方案(心得記錄)
阿新 • • 發佈:2019-02-15
背景:
今天面試一面和二面都還ok,三面是兩個小姐姐(工作性質應該是外包駐場,所以有甲方來面),簡歷上巴拉巴拉的簡單聊了一下,到了關鍵了,小姐姐說問一下基礎的東西(這也是最怕的,畢竟Vue我之前用的挺淺,侷限在專案所用),小姐姐問,怎麼解決Vue專案中的跨域問題。
我當時虎軀一震,用伺服器代理解決,我們之前的專案都是這麼幹的,簡單省事,當時還想說jsonp的,但是怕錯了,沒敢說,結果可想而知,表現一般,小姐姐就問倆問題,都答的不好,所以結束之後,我趕快補習了一下。
1.域名不同
2.協議不同
3.埠不同
- 通過後端解決
這個主要解決埠和協議跨域的問題。 - 在前端解決
然後是詳細的方法了,後端方法有(應該不全,望提醒補充):
1)CORS(跨域資源共享)(cross-origin resourse sharing)通過伺服器的response響應頭裡引數標註(參考阮神的文章):
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials:true
2 )伺服器代理
然後就是前端來處理跨域問題
1)Ajax的jsonp 它利用的是html標籤中src屬性可以不受跨域影響的特性。這個寫的比較全面
2)document.domain主要用於主域名相同的不同子域名之間的跨域
3)http-proxy-middleware 代理解決(專案使用vue-cli腳手架搭建