jquery跨域请求C# webapi

1，服务端设置响应头,在webapi的web.config做如下设置，则所有api均可接受跨域请求。

<system.webServer>
     <httpProtocol>
      <!--跨域配置开始-->
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" /><!--支持全域名访问，不安全，部署后需要固定限制为客户端网址-->
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><!--支持的http 动作-->
        <add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" /><!--响应头 请按照自己需求添加 这里新加了token这个headers-->
        <add name="Access-Control-Request-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><!--允许请求的http 动作-->
      </customHeaders>
      <!--跨域配置结束-->
    </httpProtocol>
<system.webServer>

 

2，由于webapi支持两种请求内容类型，所以此时jQuery有两种请求方式，application/json或者x-www-form的。如果是x-www-form的形式，则不需要再进行设置代码入下：

var url = 'http://localhost:5346/Apply/Test';
$.ajax({
  url: url, async: true, data: {MemberID: 1, UserID: 2}, success: function (result) {
    console.log(result);
  },
  conentType: 'application/x-www-form-urlencoded',
  type: 'Post'
});

如果是json格式，因为浏览器要发2次请求才可以，第一次是option类型的，所以还要设置下C#web的过滤器如下：

public class LogAttribute : ActionFilterAttribute
    {
        Logger logger = LogManager.GetCurrentClassLogger();
        /// <summary>
        /// 进入方法
        /// </summary>
        /// <param name="actionContext"></param>
        public override void OnActionExecuting(HttpActionContext actionContext)
        {
            if (actionContext.Request.Method == HttpMethod.Options)
            {
                actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Accepted);
                return;
            }

            if (actionContext.Request.Method == HttpMethod.Post)
            {
                try
                {
                    //logger.Error(actionContext.Request.RequestUri.AbsoluteUri + "进入执行");
                }
                catch { }
            }
            base.OnActionExecuting(actionContext);
        }

        /// <summary>
        /// 返回值
        /// </summary>
        /// <param name="actionExecutedContext"></param>
        public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
        {
            if (actionExecutedContext.Request.Method == HttpMethod.Post)
            {
                try
                {
                    //logger.Warn(actionExecutedContext.Request.RequestUri.AbsoluteUri + "响应");
                }
                catch { }
            }
            base.OnActionExecuted(actionExecutedContext);
        }
    }

并且要让你让你请求的接口支持[HttpOptions]注解

[HttpPost]
        [HttpOptions]
        public object test(MemberUserIDModel model)
        {
            //var exception = "";
            //var result = ApplyQueryer.HandleSubmitApply("6303", "201501121505386673401427811322233026", "201909221558528832074001925211309046", "[{\"id\":\"autoui_11980155830944846\",\"value\":\"123\"}]", out exception);

            if (model != null)
            {
                return model.MemberID;
            } else
            {
                return 1;
            }
        }

此时的jQuery代码如下：

var url = 'http://localhost:5346/Apply/Test';
$.ajax({
  url: url, async: true, data: JSON.stringify({MemberID: 123, UserID: 2}), success: function (result) {
    console.log(result);
  },
  contentType: 'application/json',
  type: 'Post'
});