Http跨域

標籤：eva   addheader   microsoft   detail   其他   它的   類庫   cookie   1.0   

一、傳統

ajax跨域訪問是一個老問題了，解決方案很多，比較常用的是JSONP方法，JSONP方法是一種非官方方法，而且這種方法只支援GET方式，不如POST方式安全。 即使使用jQuery的jsonp方法，type設為POST，也會自動變為GET。

官方問題說明：

"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.

如果跨域使用POST方式，可以使用建立一個隱藏的iframe來實現，與ajax上傳圖片原理一樣，但這樣會比較麻煩。

二、當跨域訪問時，瀏覽器會發請求嗎

沒有設定跨越，瀏覽器會返回

XMLHttpRequest cannot load http://google.com/. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://run.jsbin.io‘ is therefore not allowed access.

在開發工具中Network並沒有任何記錄。但實際請求仍會被發送，只是在瀏覽器做了攔截。 參考:Access-Control-Allow-Origin與跨域

三、Access-Control-Allow-Origin來實現跨域訪問

隨著跨域請求的應用越來越多，W3C提供了跨域請求的標準方案（Cross-Origin Resource Sharing）。IE8、Firefox 3.5 及其以後的版本、Chrome瀏覽器、Safari 4 等已經實現了 Cross-Origin Resource Sharing 規範，實現了跨域請求。所有和CORS相關的response header都是以“Access-Control-“為首碼的：

• Access-Control-Allow-Origin（必須） 這個必須包含在所有合法的跨域請求的response中，其值要麼是Origin header中的值，要麼就是”*“允許任何域的請求。
• Access-Control-Allow-Credentials(可選)，預設情況下cookie是不包含在CORS請求中的，使用這個header將會指明要在CORS請求中包含cookie，它的有效值是true, 如果不需要cookie, 正確的做法不是將其值設為false, 而是根本就不要這個包含header.
• Access-Control-Expose-Header(可選)，XMLHttpRequest 2 object中有一個getResponseHeader()方法，用以返回特定的response header，但是它只能得到簡單的響應header,如果想讓用戶端訪問到其他的一些header, 必須設定這個 Access-Control-Expose-Header，它的值是以逗號分隔的你想暴漏給用戶端的header。

在伺服器響應用戶端的時候，帶上Access-Control-Allow-Origin頭資訊。

• 如果設定 Access-Control-Allow-Origin:*，則允許所有網域名稱的指令碼訪問該資源。
• Access-Control-Allow-Origin:http://www.phpddt.com.com,允許特定的網域名稱訪問。

參考:

• 利用Access-Control-Allow-Origin回應標頭解決跨域請求
• 跨源資源共用 Cross Origin Resource Sharing(CORS) (重點)
• ajax 設定Access-Control-Allow-Origin實現跨域訪問

四、Asp.Net封裝Access-Control-Allow-Origin頭資訊1.Web.config

在Web.config中加入統一的Access-Control-Allow-Origin返回頭資訊，是最原始，也是最直接的。無論是在老版本WebForm還是Mvc都適用。

CORS on IIS7 For Microsoft IIS7, merge this into the web.config file at the root of your application or site:

<?xml version="1.0" encoding="utf-8"?><configuration>    <system.webServer>          <httpProtocol>              <customHeaders>                  <add name="Access-Control-Allow-Origin" value="*" />              </customHeaders>          </httpProtocol>      </system.webServer>  </configuration>

2.自訂Attribute，來增加頭資訊

a)建立一個attribute

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute{    public override void OnActionExecuting(ActionExecutingContext filterContext)    {        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");        base.OnActionExecuting(filterContext);    }}

b)應用到Controller中的Action

[AllowCrossSiteJson]public ActionResult YourMethod(){    return Json("data");}

參考:ASP.NET MVC 設定Access-Control-Allow-Origin

3.Microsoft.AspNet.Cors

使用Microsoft.AspNet.Cors包，這個是微軟封裝好的一個類庫，原理和之前是一樣的，有興趣的話可以詳細參考如下的文章配置:

• Enabling Cross-Origin Requests in ASP.NET Web API 2 (官網)
• 在ASP.NET 5應用程式中的跨域請求功能詳解

Http跨域