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)来处理的,后续在进行实验。

分类: ASP.NET, JAVASCRIPT
 
 
本文转自左正博客园博客,原文链接: http://www.cnblogs.com/soundcode/p/7233725.html /,如需转载请自行联系原作者
相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
1月前
|
Web App开发 JSON 前端开发
Ajax实现动态及时刷新表格数据
Ajax实现动态及时刷新表格数据
73 1
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
20 1
|
1月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
1月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
24 0
|
1月前
|
数据采集 前端开发 JavaScript
Python爬虫之Ajax数据爬取基本原理#6
Ajax数据爬取原理【2月更文挑战第19天】
47 1
Python爬虫之Ajax数据爬取基本原理#6
|
1月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
207 2
|
1月前
|
JSON 前端开发 数据格式
Ajax传递json数据
Ajax传递json数据
14 0
|
JSON 前端开发 JavaScript
Ajax跨域解决方案
讲述跨域原因以及从原理上讲述两种解决方案:jsonp,options
4756 0
|
Web App开发 前端开发 JavaScript
ajax 跨域----好用的解决方案
一、前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅 二、前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源...
2321 0
|
安全 前端开发 程序员