jQuery+ASP.NET MVC基于CORS實現帶cookie的跨域ajax請求 - dudu－IT工程師數位筆記本

文章出處

這是今天遇到的一個實際問題，在這篇隨筆中記錄一下解決方法。

ASP.NET Web API提供了CORS支持，但ASP.NET MVC默認不支持，需要自己動手實現。可以寫一個用于實現CORS的ActionFilterAttribute，我們就是這么實現的：

public class AllowCorsAttribute : ActionFilterAttribute
{
    private string[] _domains;

    public AllowCorsAttribute(string domain)
    {
        _domains = new string[] { domain };
    }

    public AllowCorsAttribute(string[] domains)
    {
        _domains = domains;
    }

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var context = filterContext.RequestContext.HttpContext;
        var host = context.Request.UrlReferrer?.Host;
        if (host != null && _domains.Contains(host))
        {
            context.Response.AddHeader("Access-Control-Allow-Origin", $"http://{host}");
            context.Response.AddHeader("Access-Control-Allow-Credentials", "true");
        }
        base.OnActionExecuting(filterContext);
    }

在需要支持CORS的Controller Action上加上[AllowCors("www.cnblogs.com")]標記。

jquery ajax的請求代碼如下：

$.ajax({
    url: '...',
    type: 'get',
    xhrFields: {
        withCredentials: true
    },
    dataType: 'application/json; charset=utf-8',
    success: function (data) {
        //...
    }
});

【遇到的問題】

1）一開始在ajax代碼中沒加"withCredentials: true"，發現ajax請求中沒帶上cookies。

2）加了"withCredentials: true"后，服務端響應出錯：

XMLHttpRequest cannot load '{url}'. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. Origin 'http://www.cnblogs.com' is therefore not allowed access.

后來在服務端添加了如下的響應頭解決了問題：

context.Response.AddHeader("Access-Control-Allow-Credentials", "true");

3）如果是http post，ajax的請求參數中contentType不能用applicaion/json，要用application/x-www-form-urlencoded。

$.ajax({
    url: 'cross domain url',
    data: { reason: txtReason },
    contentType: 'application/x-www-form-urlencoded; charset=utf-8',
    type: 'post',
    dataType: 'json',
    xhrFields: {
        withCredentials: true
    },
    success: function (data) {
        //...
    }
});