在ABP的Web层中实现复杂请求跨域访问

2022-09-15 12:17:51

在最近的项目中，后端使用ABP，前端采用React，前后端完全分离。其中大部分接口都通过WebApi层调用，项目中未使用Session。但最后在添加一个网站的验证码验证留言功能时，使用了Session验证的方式，所以将验证码请求与校验功能放在了Web层。由于测试阶段前后端不同域，涉及到跨域请求的问题。跨域问题可以通过代理等手段解决，但是也可以在后端做些简单的修改来进行实现。WebApi的跨域处理比较简单，有官方给出的解决方案Microsoft.AspNet.WebApi.Cors。但是Web层一般不涉及跨域，所以自己进行了探索实现。

一、常见方案

在web.config中添加配置。

<system.webServer>

        <httpProtocol>

            <customHeaders>

                <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/>

                <add name="Access-Control-Allow-Headers" value="x-requested-with"/>

                <add name="Access-Control-Allow-Origin" value="*" />

            </customHeaders>

        </httpProtocol>

</system.webServer>

在被访问的控制器上加上[AllowCrossSiteJson("localhost:3000")]的Attribute。

AllowCrossSiteJsonAttribute类代码如下：

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute

    {

        private string[] _domains;

        public AllowCrossSiteJsonAttribute(string domain)

        {

            _domains = new string[] { domain };

        }

        public AllowCrossSiteJsonAttribute(string[] domains)

        {

            _domains = domains;

        }

        public override void OnActionExecuting(ActionExecutingContext filterContext)

        {

            var context = filterContext.RequestContext.HttpContext;

            var host = context.Request.Headers.Get("Origin");

            if (host != null&& _domains.Contains(host))

            {

                //域

                filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", host);

                //Http方法

                filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Methods", "*");

            }

            base.OnActionExecuting(filterContext);

        }

    }

二、常见方案问题分析

上面两种常见方案，方案一堪称简单粗暴，方案二则有针对性的开放一些域来进行跨域访问，比如localhost:3000。
上面两种方案，都存在一个致命的问题，仅对简单跨域请求有效，无法处理复杂的跨域请求。
- 那么何为复杂的跨域请求？可以参考阮一峰的科普http://www.ruanyifeng.com/blog/2016/04/cors.html。
  
  比如我们常用的Post或Put请求，Content-Type字段的类型一般是application/json时，就是复杂请求。
- 复杂请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错，而这次preflight的Http方法就是Options。换句话说，如果你的xhr请求发出前，会先发出一个Options请求，就说明你要执行的请求是复杂请求。
- 对于复杂的跨域请求，如果连preflight都没有通过，何谈后续的跨域请求？！

三、增加对复杂请求的预检（Preflight，即Options请求）处理支持

asp.net的web层，Options请求是在哪里进行处理？到达控制器中的action时，已经是正式请求了，最终发现应该可以在Global.asax中，通过Application_BeginRequest方法进行处理。

protected override void Application_BeginRequest(object sender, EventArgs e)

{

    if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")//拦截处理Options请求

    {

        string domain = Request.Headers.Get("Origin");

        //

        //这里可以对domain进行校验，即维护一个可跨域访问的列表，进行比对，校验通过后才执行下面的操作。本文中不做处理。

        //

        Response.Headers.Add("Access-Control-Allow-Origin", domain);

        Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type,authorization");//authorization是我项目中要用到的，读者可以忽略

        Response.Flush();

        Response.End();

    }

    base.Application_BeginRequest(sender, e);

}

这样，我们对Options跨域请求进行了“可支持跨域”的应答。之后的正式请求到达控制器中的Action，又有相应的跨域访问处理。那么对于整个的复杂请求跨域就完成实现了。

但是，上文中我们提到，要实现的是验证码Session验证功能，那么就还涉及到Cookie跨域携带的问题，我们来做进一步的改造。

四、携带Cookie跨域

修改Global.aspx中的Application_BeginRequest方法，增加代码Response.Headers.Add("Access-Control-Allow-Credentials", "true");

protected override void Application_BeginRequest(object sender, EventArgs e)

{

        if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")//拦截处理Options请求

        {

            string domain = Request.Headers.Get("Origin");

            //

            //这里可以对domain进行校验，即维护一个可跨域访问的列表，进行比对，校验通过后才执行下面的操作。本文中不做处理。

            //

            Response.Headers.Add("Access-Control-Allow-Origin", domain);

            Response.Headers.Add("Access-Control-Allow-Headers", "Content-Type,authorization");//authorization是我项目中要用到的，读者可以忽略

            Response.Headers.Add("Access-Control-Allow-Credentials", "true");//可携带Cookie

            Response.Flush();

            Response.End();

        }

        base.Application_BeginRequest(sender, e);

}

修改AllowCrossSiteJsonAttribute类的OnActionExecuting方法,

增加代码filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Credentials", "true");，另外需要注意filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", host);，代码中host不能用*来代替，必须使用具体的host名称，这是跨域携带cookie的要求。

public override void OnActionExecuting(ActionExecutingContext filterContext)

{

        var context = filterContext.RequestContext.HttpContext;

        var host = context.Request.Headers.Get("Origin");

        if (host != null&& _domains.Contains(host))

        {

            //域，带cookie请求必须明确指定host，不能使用*代替

            filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", host);

            //Http方法

            filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Methods", "*");

            //可携带cookie

            filterContext.RequestContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Credentials", "true");

        }

        base.OnActionExecuting(filterContext);

}

至此，我们完成了在asp.net MVC中复杂请求携带cookie跨域的处理。下面给出前端的调用代码以供参考。

Ajax版本

    $.ajax({

        url: 'http://192.168.100.66:3006/OnlineMessage',

        type: 'post',

        xhrFields: {

            withCredentials: true

        },

        dataType: 'application/json; charset=utf-8',

        data: {

            "author": "1",

            "qq": "2",

            "phone": "3",

            "email": "4",

            "content": "留言",

            "checkCode": "一二三四"

        },

        complete: function (data) {

            alert(JSON.stringify(data));

        }

    });

Xhr版本

    function loadXMLDoc() {

        var xhr = new XMLHttpRequest();

        xhr.open("POST", "http://192.168.100.66:3006/OnlineMessage");

        xhr.setRequestHeader("Content-type", "application/json");

        xhr.withCredentials = true;

        xhr.send('{"author": "1","qq": "2","phone": "3","email": "4","content": "留言","checkCode": "一二三四"}');

    }

码农公寓

一、常见方案

二、常见方案问题分析

三、增加对复杂请求的预检（Preflight，即Options请求）处理支持

四、携带Cookie跨域

相关文章