开发者社区> 科技小毛> 正文

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

简介:
+关注继续查看

本文主要介绍了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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/// <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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 设置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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
[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)来处理的,后续在进行实验。

 
 
本文转自左正博客园博客,原文链接:http://www.cnblogs.com/soundcode/p/7233725.html/,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
ASP.NET WebApi+Vue前后端分离之允许启用跨域请求
119 0
HttpClient 调用WebAPI时—传参的三种方式(ASP.NET MVC&CORE均适用)
HttpClient 调用WebAPI时—传参的三种方式(ASP.NET MVC&CORE均适用)
144 0
版本化ASP.NET Core WebApi
版本化ASP.NET Core WebApi
47 0
【原创】ASP.NET WebApi接收xml文件 xml序列化
如何新建WebApi项目就不用我介绍了吧。 直接进入正题。 首先,在.net平台不论要接收什么,肯定是从Request里获取。 大家肯定对普通的参数获取非常熟悉了,下面就介绍一下如何从Request获取文件流. System.IO.Stream sm =Request.Content.ReadAsStreamAsync().Result 这个方法返回的是一个System.IO.Stream类型,如果是单纯想获得文件,到这一步你就可以把它保存到本地了。
8753 0
ASP.NET Core - 实现自定义WebApi模型验证
ASP.NET Core - 实现自定义WebApi模型验证  Framework时代    在Framework时代,我们一般进行参数验证的时候,以下代码是非常常见的 复制代码 [HttpPost] public async Task<JsonResult> SaveNewCus...
1455 0
ASP.NET Core on K8S学习初探(2)部署WebAPI到K8S
本文首先主要快速地不完全地不求甚解地过了一下K8S中的一些重要的基本概念,然后通过kubectl部署一个ASP.NET Core WebAPI到K8S中,并初步使用了K8S的伸缩特性对Deployment进行实例的伸缩,体验了一下所谓的容器的编排。
2486 0
ASP.NET Core微服务之Docker容器化WebAPI
Tip: 此篇已加入.NET Core微服务基础系列文章索引 一、Docker极简介绍 1.1 总体介绍   Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源。
4098 0
Asp.Net Core WebAPI使用Swagger时API隐藏与分组
Asp.Net Core WebAPI使用Swagger时API隐藏与分组1、前言为什么我们要隐藏部分接口? 因为我们在用swagger代替接口的时候,难免有些接口会直观的暴露出来,比如我们结合Consul一起使用的时候,会将健康检查接口以及报警通知接口暴露出来,这些接口有时候会出于方便考虑,没有进行加密,这个时候我们就需要把接口隐藏起来,只有内部的开发者知道。
2444 0
如何解决Asp.Net MVC和WebAPI的Controller名称不能相同的问题
原文:如何解决Asp.Net MVC和WebAPI的Controller名称不能相同的问题 1、问题描述 假如有一个文章的业务(Article),我们在 Controllers文件夹中创建MVC Controller和Api Controller,各个Controller中都有相同的获取文章内容的Action(Content)。
1238 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WEB浏览器中即将发生的安全变化
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载