.首先要知道ajax请求的核心是JavaScrip对象和XmlHttpRequest,而浏览器请求的核心是浏览器我的个人博客(基于SSM,Redis,Tomcat集群的后台架构)

github:https://github.com/liqianggh

ajax请求

浏览器请求

场景一:使用ajax获取session中的user(跨域)

从上图可知,ajax每次访问服务器时都没有携带cookie,所以服务器每次都会分配一个新的session对象,所以ajax默认请求是直接获取不了session中的数据的。因此,如果我们想要通过ajax获取当前浏览器的session,我们必须保证每次发送请求都要携带cookie以确保获取的事统一个session。

解决方法:step1.服务器设置接收ajax发送的cookie

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;
//HandlerInterceptorAdapter
//跨域设置
public class CrossInterceptor extends HandlerInterceptorAdapter {
  
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
response.addHeader("Access-Control-Allow-Origin","http://localhost:8080");
response.addHeader("Access-Control-Allow-Methods","*");
response.addHeader("Access-Control-Max-Age","100");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
//允许客户端发送cookies true表示接收,false不接受 默认为false?
response.addHeader("Access-Control-Allow-Credentials","true");
return super.preHandle(request, response, handler);
} }

step2 。设置ajax请求携带cookie

    $.ajax({
url: url+'/checkout.action',
type: 'GET',
dataType: '',
data: {verifyCode: VerificationCodeInput.value},
//添加跨域
async: false,
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function(data){
console.log(data);
}
});

注: xhrFields: { withCredentials: true }, crossDomain: true, 一定要加上!!!!

这样就可以愉快的玩耍了!

场景二:当用户需要校验session是否登陆(没有登陆跳转到登陆页面)

基于场景一,已经解决了回话问题但是在使用SpringMVC中

request.getRequestDispatcher(xxxx.html").forward(request, response);
     response.sendRedirect("http://www.baidu.com");

会报错。因为当服务器转发或者重定向时返回的是一个页面,因为只有浏览器才能解析显示页面,而ajax的对象却不能,所以会报错错。

解决办法:因为ajax请求对象不能解析显示页面,所以不能直接转发或重定向,这时我们需要绕过服务器,直接使用浏览器跳转页面,但是对于session过期(用户没有登陆)我们要给浏览器一个反馈,我们可以给浏览器一个大于等于600的错误码

      String requestType = request.getHeader("X-Requested-With");
if(requestType != null && "XMLHttpRequest".equalsIgnoreCase(requestType.trim())) {
//如果是ajax请求就设置一个自定义响应头
response.setHeader("sessionStatus", "timeout");
        //设置错误码以及错误码提示
response.sendError(666, "session timeout");
return false;
}

同时要对ajax设置全局options

$.ajaxSetup({
type:'post',
complete:function(xhr, ts){ //XMLHttpRequest, textStatus
var sessionStatus = xhr.getResponseHeader('sessionstatus');
if(sessionStatus == 'timeout') {
alert('用户没有登陆,请登录!');
window.top.location.href = 'Login.html';
}
}
});

这样就可以通过浏览器进行页面跳转了!

SpringMVC处理ajax请求的跨域问题和注意事项的更多相关文章

  1. ajax请求ashx跨域问题解决办法

    ajax请求ashx跨域问题解决办法 https://blog.csdn.net/windowsliusheng/article/details/51583566 翻译windowsliusheng  ...

  2. AJAX请求和跨域请求详解(原生JS、Jquery)

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  3. 解决ajax请求cors跨域问题

    ”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...

  4. Ajax请求,跨域小坑

    今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...

  5. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. jQuery解决ajax请求的跨域问题

    这两天工作中频繁的遇到JS的跨域问题,都通过绕开ajax请求的方式.特地百度了一下,把跨域问题解决了.在这分析一下 首先贴上js的页面代码: <html> <head> < ...

  7. Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题

    1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...

  8. Ajax请求WebService跨域问题 [转载]

    1.背景 用Jquery中Ajax方式在asp.net开发环境中WebService接口的调用 2.出现的问题 原因分析:浏览器同源策略的影响(即JavaScript或Cookie只能访问同域下的内容 ...

  9. 谷歌扩展程序设置ajax请求允许跨域(极少人知道的解决方案)

    前言: 跨域问题一直是个老生常谈的问题,在实际开发过程中,跨域的问题常常会让开发者非常的头疼. 常用的几种跨域解决方案: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Lev ...

随机推荐

  1. bundle install 安装的 gem 提示 cannot load such file

    /usr/local/lib/ruby/site_ruby/2.1.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load ...

  2. 2017-2018-2 20155203《网络对抗技术》Exp5 MSF基础应用

    1.实践过程记录 1.1一个主动攻击实践,如ms08_067; msf > search ms08_067_netapi //查看可以用的工具 [!] Module database cache ...

  3. 20155218《网络对抗》MSF基础应用

    20155218<网络对抗>MSF基础应用 实验过程 1.一个主动攻击实践,如ms08_067; 首先使用 search ms08_067查询一下该漏洞: show target 查看可以 ...

  4. 【php增删改查实例】第九节 - 部门管理模块(模糊查询)

    给datagrid添加一个工具栏. 效果: 模糊查询部门名称. 接下来,在工具栏区域画一个input框: <div id="toolbar" style="padd ...

  5. 【php增删改查实例】第六节 - 部门管理模块(开始)

    sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如 ...

  6. 【HNOI2016】矿区

    题面 题解 知识引入 1. 平面图 一个图\(G=(V,E)\),若能将其画在平面上,且任意两条边的交点只能是\(G\)的顶点,则称\(G\)可嵌入平面,或称\(G\)是可平面的. 可平面图在平面上的 ...

  7. 洛咕3312 [SDOI2014]数表

    洛咕3312 [SDOI2014]数表 终于独立写出一道题了...真tm开心(还是先写完题解在写的) 先无视a的限制,设\(f[i]\)表示i的约数之和 不妨设\(n<m\) \(Ans=\su ...

  8. 上google的方法

    最近Google又被墙了....哎,纠结..... 说实话,咱都是良民,爱党爱国,真心不想干啥,只想查点资料的,输入google都上不去了. 方法: 1. FQ.很麻烦,有时候改来改去也容易出错,速度 ...

  9. Django中的cookie和session

    前言 HTTP协议 是短连接.且状态的,所以在客户端向服务端发起请求后,服务端在响应头 加入cokie响应给浏览器,以此记录客户端状态: cook是来自服务端,保存在浏览器的键值对,主要应用于用户登录 ...

  10. 【绝对给力】Android开发免豆资料(教程+工具+源码)地址汇总

    教程下载: [免费]android界面效果全汇总.pdf http://down.51cto.com/data/209179 Android终极开发教程[pdf高清版] http://down.51c ...