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

 更新时间:2017年05月18日 08:16:47   作者:myface  
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

前言

最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循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();
  }

最终效果:

后言:

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

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

相关文章

  • DAM 简单跨数据库ADO.NET组件

    DAM 简单跨数据库ADO.NET组件

    这是一个可以实现简单跨数据库基于ADO.NET的组件。您可以在DAL层透过它来访问数据库。这是一个以前写过一个小组件的修改版.
    2011-01-01
  • 浅析.net简单工厂模式

    浅析.net简单工厂模式

    这篇文章主要介绍了浅析.net简单工厂模式,需要的朋友可以参考下
    2014-12-12
  • asp.net 2.0的文件上传(突破上传限制4M)

    asp.net 2.0的文件上传(突破上传限制4M)

    在asp.net 2.0中,因为有了fileupload控件,上传文件十分简单
    2009-06-06
  • .NET框架中间语言IL指令大全

    .NET框架中间语言IL指令大全

    IL是微软.NET平台上衍生出的一门中间语言,.NET平台上的各种高级语言(如C#,VB,F#)的编译器会将各自的代码转化为IL。,其中包含了.NET平台上的各种元素,如“范型”,“类”、、“接口”、“模块”、“属性”等等。
    2016-06-06
  • ASP.NET使用正则表达式屏蔽垃圾信息

    ASP.NET使用正则表达式屏蔽垃圾信息

    找资料,看看如何实现使用正则表达式屏蔽垃圾信息,找来找去找出来的都不怎么好,有不详细的,有代码缺失的。最后还是找到了微软,先摘过来,大概思路已经有了,只需把下面微软给的样例代码修改一下即可,具体能不能行还不知道,先睡一觉,起来再慢慢研究。
    2008-09-09
  • 使用.NET8实现Web API的项目实践

    使用.NET8实现Web API的项目实践

    ASP.NET Web API是一种框架,用于轻松构建可以由多种客户端访问的 HTTP服务,本文主要介绍了使用.NET8实现Web API的项目实践,具有一定的参考价值,感兴趣的可以了解一下
    2024-05-05
  • 使用VSCode开发和调试.NET Core程序的方法

    使用VSCode开发和调试.NET Core程序的方法

    这篇文章主要介绍了使用VSCode开发和调试.NET Core程序的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • .Net6.0+Vue3实现数据简易导入功能全过程

    .Net6.0+Vue3实现数据简易导入功能全过程

    最近在用VUE做一个数据导入的功能,下面这篇文章主要给大家介绍了关于使用.Net6.0+Vue3实现数据简易导入功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • asp.net网站首页根据IP自动跳转指定页面的示例

    asp.net网站首页根据IP自动跳转指定页面的示例

    本文介绍的程序主要实现根据IP地址或地址段或IP所在城市进行自动跳转到指定页面的功能,需要的朋友可以参考下
    2014-02-02

最新评论