欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

程序员文章站 2023-11-22 11:09:40
前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循restfull规范,使前后端完全分离...

前言

最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循restfull规范,使前后端完全分离,实现大前端思想。由于是初次尝试,中途也遇到了不少问题。今天就来讨论一下其中之一的问题,webapi与前端ajax 进行跨域数据交互时,由于都在不同的二级域名下(一级域名相同),导致cookies数据无法获取。

最开始通过头部(header)将cookies传输到其webapi,也能解决问题。

下面讲述另外一种解决方案。

解决过程:

步骤一:将cookies的domain(域)设置成一级域名,例如:“.wbl.com”(a.wbl.com域名下)

这是前提,此时在其中一个webapi中设置了cookies后,用浏览器直接访问其它的webapi是可以获取到cookies的。例如:a.wbl.com域名下设置的cookies,用浏览器直接访问b.wbl.com域名的webapi是可以获取到cookies的。但是用c.web.com域名下的ajax访问b.wbl.com时,就无法获取到cookies了,这是由于浏览器中ajax的权限相对较低,ajax无法跨域问题导致。

写入cookies代码:

/// <summary>
  /// 给指定的 cookies 赋值
  /// </summary>
  /// <param name="cookkey">cookies 名称</param>
  /// <param name="value">cookies 值</param>
  /// <param name="domain">设置与此 cookies 关联的域(如:“.tpy100.com”)(可以使该域名下的二级域名访问)</param>
  public static void setcookiesvalue(string cookkey, string value, string domain)
  {
   httpcookie cookie = new httpcookie(cookkey);
   cookie.value = value;
   cookie.httponly = true;
   if (!string.isnullorempty(domain) && domain.length > 0)
    cookie.domain = domain;
   httpcontext.current.response.cookies.add(cookie);
  }

步骤二:jquery中ajax使用jsonp数据类型解决跨域问题(c.wbl.com域名下)

前后端需要定义统一的回调(callback)函数名。

前端ajax代码:

// 设置cookies
  function set() {
   var url = "http://a.wbl.com/api/setvalue/888888";
   $.ajax({
    type: "get",
    url: url,
    datatype: "jsonp",
    jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
    jsonpcallback: "success_jsonpcallback", //callback的function名称
    success: function (json) {
     console.log(json);
     alert(json);
    },
    error: function () {
     alert('fail');
    }
   });
  }
  // 获取cookies
  function get() {
   var url = "http://b.wbl.com/api/getvalue";
   $.ajax({
    type: "get",
    url: url,
    datatype: "jsonp",
    jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数
    jsonpcallback: "success_jsonpcallback", //callback的function名称
    success: function (json) {
     console.log(json);
     alert(json);
    },
    error: function () {
     alert('fail');
    }
   });
  }

步骤三:webapi中返回jsonp数据类型

jsonp格式:

success_jsonpcallback({“cookies”:”888888”})

由于这种格式与json格式有所不同,只用webapi里的返回ihttpactionresult或httprequestmessage类型不行,最后通过流的方式输出才实现了这个格式。

webapi代码:

[route("api/getvalue")]
  [httpget]
  public void getvalue()
  {
   string ccc = mytools.request.getstring("callbackparam");
   var a = new { name = "cookies", value = mytools.cookies.getcookiesvalue("name") };
   string result = ccc + "({\"cookies\":\"" + mytools.cookies.getcookiesvalue("name") + "\"})";
   //var response = request.createresponse(httpstatuscode.ok);
   //response.content = new stringcontent(result, encoding.utf8);

   httpcontext.current.response.write(result);
   httpcontext.current.response.end();
   // return response;
  }
  [route("api/setvalue/{id}")]
  [httpget]
  public void setvalue(int id)
  {
   //string domain = "";
   string domain = ".wbl.com";
   mytools.cookies.clearcookies("name", domain);
   mytools.cookies.setcookiesvalue("name", id.tostring(), domain);

   string ccc = mytools.request.getstring("callbackparam");
   string result = ccc + "({\"result\":\"设置成功\"})";

   httpcontext.current.response.write(result);
   httpcontext.current.response.end();
  }

最终效果:

ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

后言:

这只是解决这个问题的一种方法。百度后还有一种通过第三方插件(cross-origin、help page)来处理的,后续在进行实验。各位路过的大神如有更好的方法,望不要吝啬,请赐教!菜鸟感激不尽!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!