最近的项目中涉及到了应用ajax请求后台系统登录,身份认证失败,经过不断的调试终于找到解决方案。

应用场景:

  项目测试环境:前端应用HTML,js,jQuery ajax请求,部署在Apache服务器;后端业务系统应用spring mvc,mybatis,部署在tomcat服务器。当在一个系统需要调用另一个系统的时候,就会出现跨域的问题,即本次我们遇到了ajax请求的跨域问题。

  系统权限安全框架使用shiro,系统登录时发送ajax请求调用springmvc action方法进行系统登录及身份认证,角色权限授权等。由于ajax请求时,浏览器会认为携带Cookie是不安全请求,将限制其携带Cookie信息,导致登录action方法无法获取并响应相应的Cookie(JSESSIONID),身份认证及角色权限授权、退出等都操作都无法正常使用。

解决方案:

  1、当发送ajax请求时,查看浏览器调试信息中Headers和Cookies,发现发送到后端的跨域请求并没有携带 cookie 信息,可见Request Headers不包含Cookie属性,Response Headers中也不包含Set-Cookie属性,导致无法得到后台业务系统的认证。

  

  解决:在ajax里添加withCredentials的配置,允许其请求携带cookie信息。通过设置withCredentials=true,发送Ajax时,Request header中便会带上 Cookie 信息。

$.ajax({
type: "post",
url:url,
async:false,
data:datatosend,
dataType:"json",
beforeSend: function(xhr) {
xhr.withCredentials = true;
}
crossDomain:true,
success: function (data) {
var a=JSON.stringify(data);
if(data.result==true){
  ...........
   }else{
       ...........
     }
},
error:function (data) {
var a=JSON.stringify(data);
alert(a);
}
});

  注意:<踩过的坑>我们在beforeSend方法里设置withCredentials=true;在上述代码情境下,如果使用xhrFields:{ withCredentials:true }方法,则允许携带cookie信息的配置并不生效。(原因:ajax中添加了async:false,即修改为同步了,在窗口上下文的同步模式中,已不再支持使用XMLHttpRequest的withCredentials属性)。当保持异步模式时,我们可以更换对应的方法。注意2种方法的区分。

  2、服务器server端要配置Access-Control-Allow-Credentials

  我们在客户端设置了withCredentials=true 参数,对应着,服务器端要通过在响应 header 中设置Access-Control-Allow-Credentials = true来运行客户端携带证书式的访问。通过对Credentials参数的设置,就可以保持跨域Ajax时传递的Cookie。

response.setHeader("Access-Control-Allow-Credentials", "true");

  3、服务器server端要配置Access-Control-Allow-Origin

  到以上配置为止,发送ajax请求,我们发现还会出现一个错误,提示我们 Access-Control-Allow-Origin 不能用 * 通配符。原因是:当服务器端 Access-Control-Allow-Credentials = true时,参数Access-Control-Allow-Origin 的值不能为 '*' 。

  我们重新设置Access-Control-Allow-Origin的值,当服务器端接收到请求后,在返回响应时,把请求的域Origin填写到响应的Header信息里(即谁访问我,我允许谁),代码如下:

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

  ok,到目前问题搞定了,经过测试,可成功传递及响应cookie信息,浏览器调试信息如下图所示:

  

  

  

Ajax跨域请求action方法,无法传递及接收cookie信息(应用于系统登录认证及退出)解决方案的更多相关文章

  1. 第114天:Ajax跨域请求解决方法(二)

    一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js   http:// (协议号)       www  (子 ...

  2. 第113天:Ajax跨域请求解决方法

    一.原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步:设置状态监听函数 第三步:open一个连接,true是异步请求 第四部:send一个请求,可以发送一个对象和字符串,不需要 ...

  3. WebApi Ajax 跨域请求解决方法(CORS实现)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别 ...

  4. WebApi Ajax 跨域请求解决方法(CORS实现)(作者:jianxuanbing)

    概述 ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题,特别各 ...

  5. Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法

    今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终:

  6. JQuery - Ajax和Tomcat跨域请求问题解决方法!

    在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...

  7. ASP.NET MVC 实现AJAX跨域请求方法《1》

    ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据 ...

  8. jQuery ajax跨域请求的解决方法

    在Ajax应用中,jQuery的Ajax请求是非常容易而且方便的,但是初学者经常会犯一个错误,那就是Ajax请求的url不是本地或者同一个服务器下面的URI,最后导致虽然请求200,但是不会返回任何数 ...

  9. 本地主机作服务器解决AJAX跨域请求访问数据的方法

    近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...

随机推荐

  1. grails email 发送邮件插件

    1.配置email插件,在Config.groovy文件中配置: plugins { compile ":mail:1.0.5" } 2.配置Config.groovy文件: gr ...

  2. 使用 JDB 调试器

    您可以使用调试 applet 或应用程序的 jdb 命令来调试 Servlet. 为了调试一个 Servlet,我们可以调试 sun.servlet.http.HttpServer,然后把它看成是 H ...

  3. 求出10000以内所有的完全数-python

    题目: 如何用python去求出下一个(大于28的)完全数? (求出10000以内所有的完全数) 分析: 如果一个数恰好等于它的因子之和,则称该数为"完全数".各个小于它的约数(真 ...

  4. gtest入门简介

    Gtest测试,入门简介: 资源:http://developer.51cto.com/art/201108/285290.htm http://www.cnblogs.com/bangerlee/a ...

  5. idea 全部报错找不到包

    解决报错方法如下:

  6. 面试十大常见Java String问题

    本文介绍Java中关于String最常见的10个问题: 1. 字符串比较,使用 "==" 还是 equals() ?简单来说, "==" 判断两个引用的是不是同 ...

  7. idea 右下角不显示git分支

    开发工程中遇到idea右下角不显示git分支问题: 解决方案:查找资料说是需要打开VCS->Enable version control. 但是Enable version control 已经 ...

  8. Redis持久化之rdb&aof

    Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照. AOF(Append only file)持久化方式则会记 ...

  9. JQUERY几个操作action,随意记录

    .click:鼠标单击 .mouseenter 鼠标滑动

  10. crontab 问题分析 - CSDN博客 https://blog.csdn.net/tengdazhang770960436/article/details/50997297

    cd /mnt/tools/trunk/plugins/personas; python update_keywords.py crontab 问题分析  crontab 问题分析 - CSDN博客 ...