vue解決前端跨域到nginx配置項小記

One day,發表於2018-12-26

vue解決前端跨域到nginx配置項小記

跨域是作為每一個前端er必須要去面對的事情,如何去理解跨域呢?


vue解決前端跨域到nginx配置項小記

以上任何一點不同,就會產生跨域。那麼解決跨域常用方法有以下幾種(歡迎補充):

  1. Jsonp來處理跨域

雖然Jquery的ajax也有jsonp方法,但是jsonp本質上與ajax是有區別的。ajax的核心是通過XMLHttpRequest獲取非本頁的內容,而jsonp是通過script標籤的機制來呼叫伺服器提供的js指令碼,然後獲取callback引數。

  2. CORS

CORS:(Cross Origin Resource Share) 跨域資源共享,可以讓伺服器端的同學幫忙在header新增('Access-Control-Allow-Origin: *');

3. nodejs 中介軟體代理跨域

先看一下程式碼:

vue解決前端跨域到nginx配置項小記

已vue為例項,通過config目錄下的index.js設定proxyTable來解決前端跨域,解決跨域原理就是通過中間層設定代理,在請求以及傳送以前加入中間層,將不同的域名轉換成相同的域名,從而解決跨域。簡單來說就是

   你本地通過node開啟localhost:8080服務,而在你使用中間層做代理後就變成了192.168.0.88:xxxx,
再去請求伺服器。
    伺服器端收到請求後使用的就是剛才的192.168.0.88:xxxx域名,當伺服器返回響應資料也是先到中間代理層,
代理層再把IP轉成你本地node開啟的埠localhost:8080複製程式碼

這樣一來就同源達到同源策略:在相同域名下訪問介面啦!

4. nginx代理跨域

通過nginx設定反向代理,按照慣例直接上程式碼:

vue解決前端跨域到nginx配置項小記

實現原理:通過nginx配置一個代理伺服器,反向代理訪問介面地址,並且可以順便修改cookie中的資訊,方便當前域cookie寫入,從而實現跨域。上圖中只需要兩個步驟來設定,

第一步:用正則來替換你本地使用proxyTable的引數,我這邊用的api。第二步:直接設定你需要代理的介面地址。

那麼到目前為止,在日常專案當中經常解決跨域的辦法就在這裡了,歡迎大家補充,共同交流!


相關文章