ASP.NET Core CORS 簡單使用

標籤：jsonp   com   程式   需要   sem   就會   set   config   lang   

CORS 全稱"跨域資源共用"（Cross-origin resource sharing）。

跨域就是不同域之間進行資料訪問，比如 a.sample.com 訪問 b.sample.com 中的資料，我們如果不做任何處理的話，就會出現下面的錯誤：

XMLHttpRequest cannot load b.sample.com. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘a.sample.com‘ is therefore not allowed access. The response had HTTP status code 404.

請求和響應資訊：

Response HeadersContent-Type:text/html; charset=utf-8Server:Microsoft-IIS/10.0X-Powered-By:ASP.NETRequest HeadersAccept:*/*Accept-Encoding:gzip, deflateAccept-Language:zh-CN,zh;q=0.8Connection:keep-aliveContent-Length:32384Host:b.sample.comOrigin:a.sample.com

當請求發起後，Host 會擷取 Origin，然後進行判斷是否同意這個請求，判斷的標準就是 Access-Control-Allow-Origin，如果 Host 伺服器指定了 Origin 的配置，那麼在回應標頭就會有：

Access-Control-Allow-Origin:a.sample.com

相關的 Access-Control-*：

• Access-Control-Allow-Origin：指定要求標頭中 Origin 是否被訪問，如果值為 *，則表示可以讓任何 Origin 訪問。
• Access-Control-Request-Method：允許的 HTTP 要求方法，常用 Get、Post、Put 等，如果值為 *，則表示允許所有的 HTTP 要求方法訪問。
• Access-Control-Expose-Headers：用戶端預設可以從伺服器擷取回應標頭中的 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 欄位資訊，如果需要額外擷取其它 header 欄位資訊，則需要在服務端進行配置。
  Access-Control-Request-Headers：允許用戶端向伺服器發送的額外要求標頭資訊，和上面的 Access-Control-Expose-Headers 比較相似，但方向是相反的，一般會用在添加自訂 header 的時候，比如 X-Param 等等。
• Access-Control-Allow-Credentials：如果值為 true，則表示服務端可以接受用戶端發送的 Cookie 資訊，但用戶端請求中需要同時設定withCredentials = true;。
• Access-Control-Max-Age：請求檢查的緩衝時間，即在一段時間內，用戶端向伺服器發送請求，不需要再進行檢查 Origin 的配置，而是直接進行請求訪問，當然伺服器更改配置後除外。

以上是 CORS 的基本相關資訊，我們在 ASP.NET MVC 應用程式開發中，需要手動設定 CORS：

public class AllowCorsAttribute : ActionFilterAttribute{    private string[] _domains;    public AllowCorsAttribute(params string[] domains)    {        _domains = domains;    }    public override void OnActionExecuting(ActionExecutingContext filterContext)    {        var context = filterContext.RequestContext.HttpContext;        if (context.Request.UrlReferrer != null)        {            var host = context.Request.UrlReferrer?.Host;            if (host != null && _domains.Contains(host))            {                context.Response.AddHeader("Access-Control-Allow-Origin", $"http://{host}");            }        }        else        {            context.Response.AddHeader("Access-Control-Allow-Origin", "*");        }        context.Response.AddHeader("Access-Control-Allow-Methods", "GET, HEAD, OPTIONS, POST, PUT");        context.Response.AddHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");        base.OnActionExecuting(filterContext);    }}

上面代碼就是截獲每次 Action 請求，手動向請求上下文中增加相應頭的配置，以達到 CORS 的目的，Action 配置：

[AllowCors("a.sample.com", "c.sample.com")]public ActionResult Index(){    return View();}

而在 ASP.NET WebAPI 項目中配置 CORS，就不需要上面那麼複雜了，我們只需要安裝：

Install-Package Microsoft.AspNet.WebApi.Cors

然後配置啟用 CORS：

public static class WebApiConfig{    public static void Register(HttpConfiguration config)    {        config.EnableCors();        config.Routes.MapHttpRoute(            name: "DefaultApi",            routeTemplate: "api/{controller}/{id}",            defaults: new { id = RouteParameter.Optional }        );    }}

最後在對應的 Action 上面添加 CORS 配置就行了：

[EnableCors(origins: "http://a.sample.com", headers: "*", methods: "get,post", SupportsCredentials = true)]public ActionResult Index(){    return View();}

在 ASP.NET Core 的 CORS 配置和上面差不多，配置方法：

ConfigureServices 中添加配置：

public void ConfigureServices(IServiceCollection services){    // Add framework services.    services.AddMvc();    services.AddCors(options => options.AddPolicy("CorsSample",        p => p.WithOrigins("http://a.example.com", "http://c.example.com").AllowAnyMethod().AllowAnyHeader()));}

Configure 中啟用配置：

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){    app.UseStaticFiles();    app.UseMvc(routes =>    {        routes.MapRoute(            name: "default",            template: "{controller=Home}/{action=Index}/{id?}");    });    app.UseCors("CorsSample");}

Action 啟用對應的 CORS，不啟用使用[DisableCors]。

[EnableCors("CorsSample")]public ActionResult Index(){    return View();}

當然 CORS 在 ASP.NET Core 的使用不僅於此，你也可以進行自訂，具體查看最後的參考資料。

跨域除了 CORS，還有其它的解決方式：

• JSONP：通過在文檔中嵌入一個<script>標記來從另一個域中返回資料，所以只支援 GET 請求，但使用比較簡單，資料：ASP.NET Web API 配置 JSONP
• document.domain：JS 配置代碼document.domain = ‘sample.com’;，設定完之後，同域之間就可以 JS 互相訪問了，但存在一些隱患，比如一個網站被 JS 注入了，那麼就會牽扯到其它網站，資料：ASP.NET 頁面禁止被 iframe 架構引用

參考資料：

• CORS 簡介
• 跨域資源共用 CORS 詳解
• Enabling Cross-Origin Requests in ASP.NET Web API 2
• Enabling Cross-Origin Requests (CORS)
  

參考頁面：http://qingqingquege.cnblogs.com/p/5933752.html

ASP.NET Core CORS 簡單使用