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認證


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM