Aspnet Mvc 前後端分離項目手記(一) 關於跨域問題(還有前言)

     前言,最近的項目使用前後端分離的模式,記錄其中一些知識點。經過這個項目,也對前後端分離有了更多理解,尤其是在技術之外的方面。

      越來越多的項目採用前後端分離的原因,有兩點:

     1,技術方面的原因:移動端的越來越重要,一個項目可能要做好幾種版本,手機端,app,pc...,,前端完全負責頁面展示後端只負責統一的api; react,vue,ng一些優秀框架的產生,解決了很多前端開發者的痛點;還有一些隨之而來的成熟框架elementui,iview等等。

      2 ,非技術方面的原因    能做全棧的開發者相對還是比較少的,人們期望這種新的模式能夠讓責任分離,讓前後端能夠專注於做擅長的事情;還有就是,人們對新技術總是熱情滿滿 ,樂於嘗試。

         當然也帶來很多問題,比如前後端的聯調和溝通,一些細節的劃分。個人覺得,在開發效率上來講,並沒有明顯的提高,當然了技術沒有最好最壞,只有最合適

 

 

 

 

(一) 關於跨域問題

跨域的全名叫瀏覽器同源策略。主要是爲的防止一些安全性問題。具體的介紹跨域的文章有太多,這裏就不再重複了。
     注意,只有在瀏覽器中才會產生跨域,使用後端代碼或者別的代理方式請求時,是不存在跨域的。
      常見的解決辦法有jsonp,或者通過iframe子窗體,使用代理。 今天我們要說的是最主流的解決辦法:使用cors

 

在 localhost:52818的頁面中請求 localhost:8080的接口

會出現這個

 

解決辦法:找到web.config

<system.webServer>節點下面加入

 
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="accept" />
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />

</customHeaders>
</httpProtocol>

 

 再次請求,我們發現沒有跨域的問題了

問題還沒有完,我們經常會在請求時帶上身份認證的東西,比如說token。很多時候是帶在請求頭裏面的,像這樣

結果會出現這個,他的意思是token不允許出現在請求頭裏面

解決辦法

 還是web.config,加上這個就行

測試可以看到,問題解決了,也不會出現限制token了,但是會發現另一個問題,一個請求怎麼變成兩個了?

 

 會發現,多了一個option請求

 option請求又叫嗅探請求

 產生的條件有兩個,一,跨域。二請求頭header中有自定義的,超出默認範圍的字段,比如說剛纔我們使用的token

下面是默認的請求頭的範圍

 

 解決辦法發:options請求時無法避免的。但是我們可以讓他緩存在瀏覽器,儘量產生更少的options請求

 在剛纔的配置中再加上 <add name="Access-Control-Max-Age" value="86400" /> ,意思是讓他緩存在瀏覽器86400秒

 

再次試驗,可以發現第一次還存在options請求,後面就沒了

相同的,後端也需要對options請求做處理:使用httpModule攔截options請求,並返回空字符串

 

 添加完httpModule後一定要在web.config裏面配置,才能註冊到IIS

配置方法,找到Module節點,加入 <add name="MOptions" type="Site1.Filter.MOptions, Site1" /> ,也就是<add name="類名" type="類全名, 命名空間名" /> ,

 

這樣,跨域問題就算完成了,

下一篇將會聊一下前後端分離時的token認證

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章