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