你的位置:首页 > ASP.net教程

[ASP.net教程]jquery.ajax 跨域请求webapi,设置headers


解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现。

1.第一步 服务端设置响应头,在webapi的web.config做如下设置

 <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>

2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参数的时候的 "预请求"   就是如果遇到 跨域并设置headers的请求,所有请求需要两步完成!

A 第一步:发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。(能看到这份手稿的人,本人不相信你后台处理不了一个options请求)options请求可在权限拦截器中处理

  

 /// <summary>  /// 权限拦截器  /// </summary>  public class ApiAuthorizeAttribute : AuthorizeAttribute  {    public override void OnAuthorization(HttpActionContext actionContext)    {      if (actionContext.Request.Method == HttpMethod.Options)      {        actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Accepted);        return;      }    }  }

 

B 第二步:服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正的请求。

客户端代码:

 

 $("#btnSumit").click(function () {        var Ticket = $.cookie("token");        var model = {          id: 1        };        $.ajax({          type: "POST",          url: "http://localhost:65312/api/products/FindProductById",          data: JSON.stringify(model),          contentType: "application/json; charset=utf-8",          dataType: "json",          beforeSend: function (xhr) {          //  //发送ajax请求之前向http的head里面加入验证信息            xhr.setRequestHeader("token", Ticket); // 请求发起前在头部附加token          },          success: function (data, status) {            if (data.statuscode == "401") {              alert(data.msg);            }            else            {              alert(JSON.stringify(data))            }          },          //error: function (          //  alert(          //  alert(          //  alert(textStatus);          //},          complete: function () {          }        });      });

 

参考了如下资料

http://www.cnblogs.com/cdemo/p/5158663.html

http://blog.csdn.net/enter89/article/details/51205752