WebApi2跨域問題

一、跨域問題產生的原因：同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能。

現在所有支持JavaScript 的瀏覽器都會使用這個策略。

所謂同源是指，域名，協議，端口相同。

當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面

當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的，

即檢查是否同源，只有和百度同源的腳本才會被執行。

由於同源策略的限制，JavaScript就產生了跨域的問題。

參考： 同源策略

 

二、在WebApi2中的解決方法。

參考:

C#進階系列——WebApi 跨域問題解決方案：CORS

環境：vs2013,entity framework 6.0

后端項目：webApi 2

前端項目：

提交ajax時候用的類型：application/json

1、在nuget中搜索cors，安裝

2、在文件WebApiConfig.cs中配置跨域設置

3、因為前端提交ajax請求，用的類型是application/json。發送post請求前會先發送一個預請求，就是option請求。

要在Web.config中配置下處理option請求，讓后端能夠正確的響應option請求，前端才會繼續發送post請求。

這兩個處理程序會影響option請求的正確處理。

 <system.webServer>
     <handlers> <!--此處處理options請求。或去iis里面刪除、添加上動作添加上OPTIONS-->
      <remove name="OPTIONSVerbHandler" />
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    
  </system.webServer>

 

 

1、默認的配置：

var cors = new EnableCorsAttribute("*", "*", "*");

            config.EnableCors(cors);

這樣設置可以實現簡單請求的跨域，

但是非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。options請求。

觸發options請求的條件：

1、非GET 、POST請求

　　2、POST請求的content-type不是常規的三個：application/x- www-form-urlencoded（使用 HTTP 的 POST 方法提交的表單）、multipart/form-data（同上，但主要用於表單提交時伴隨文件上傳的場合）、text/plain（純文本）

　　3、POST請求的payload為text/html

　　4、設置自定義頭部

 

但是不能實現非簡單請求的跨域。

還需要在web.config中<system.webServer>下添加

<handlers>

      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />

      <remove name="OPTIONSVerbHandler" />

          <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

</handlers>

 

 

注意 ：

var cors = new EnableCorsAttribute("10.116.56.69:90", "*", "*");

是不行的 ，要寫http://10.116.56.69:90

注意：如果寫http://localhost:90  ，那瀏覽器訪問的時候也要訪問 http://localhost:90,如果訪問http://10.116.56.69:90，也是不能跨域的。