SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS

摘要:
1扫盲知识  1.1Ajax为什么存在跨域问题因为浏览器处于安全性的考虑不允许JS执行跨域请求。  1.2浏览器为什么要限制JS的跨域访问如果浏览器允许JS的跨域请求就很容易造成CSRF,中文名称:跨站请求伪造,缩写为:CSRF/XSRF。

1 扫盲知识

  1.1 Ajax为什么存在跨域问题

因为浏览器处于安全性的考虑不允许JS执行跨域请求。

  1.2 浏览器为什么要限制JS的跨域访问

如果浏览器允许JS的跨域请求就很容易造成 CSRF(Cross-site request forgery),中文名称:跨站请求伪造,缩写为:CSRF/XSRF。

  1.3 什么是CSRF

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第1张

2 Ajax如何实现跨域访问

  2.1 利用JSONP实现

技巧01:如果Ajax指定的数据类型为JSONP时,后台接口必须支持返回JSONP格式

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第2张

3 SpringBoot设置支持响应数据类型为JSONP

  3.1 写一个配置文件即可

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第3张

packagecn.xiangxu.demo_code.commons.config;
importorg.springframework.web.bind.annotation.ControllerAdvice;
importorg.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
importorg.springframework.web.servlet.mvc.method.annotation.AbstractMappingJacksonResponseBodyAdvice;
/**
 * @author王杨帅
 * @create 2018-07-19 22:40
 * @desc JSONP跨域支持配置
 **/
@ControllerAdvice
public class JsonpAdvice extendsAbstractJsonpResponseBodyAdvice {
    publicJsonpAdvice() {
        super("callback","jsonp");
    }
}
View Code

  3.2 编写一个测试类

技巧01:响应数据必须是一个对象

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第4张

packagecn.xiangxu.demo_code.web;
importcn.xiangxu.demo_code.commons.configProperties.SftpProperties;
importlombok.extern.slf4j.Slf4j;
importorg.springframework.web.bind.annotation.GetMapping;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RestController;
importjava.util.HashMap;
importjava.util.Map;
/**
 * @author王杨帅
 * @create 2018-07-17 8:53
 * @desc 测试控制类
 **/
@RestController
@RequestMapping(value = "/test")
@Slf4j
public classTestController {
    @GetMapping(value = "/connect")
    publicMap connect() {
        String result = "前后端连接成功_王杨帅";
        log.info(result);
        Map<String, Object> testData = new HashMap<>();
        testData.put("testData", result);
        returntestData;
    }
}
View Code

》测试返回JSON格式的响应数据

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第5张

》测试返回JSONP格式的响应数据

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第6张

4 CORS

  4.1 扫盲知识

当后台不支持跨域请求时,无论你前台怎么使劲也是白搭;【AJAX使用JSONP时除外】;

只要后台支持了跨域请求,就可以接收前台的跨域请求了

  4.2 SpringBoot开启跨域请求

利用@CrossOrigin 注解实现,该注解可以在类和方法上使用

技巧01:使用JSOP跨域时,后台不需要开启跨域请求,因为人家JSOP解决跨域时本能就是可以访问跨域资源的,只要得到的响应数据是JSONP格式就可以啦

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第7张

5 总结

  5.1 解决跨域问题的方法

》前端解决:JSONP、代理服务器

》后端解决:开启跨域支持

  5.2 后台开启了跨域支持,通过浏览器访问时失败

SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS第8张

》问题:这是因为浏览器层面对JS发出的跨域请求进行了拦截,目的是为了防止 CSRF(跨站请求伪造)

》解决:前端的跨站请求使用JSONP,后端响应的数据格式为JSONP格式即可

》技巧01:前端使用JSONP时,后端只需要返回JSONP格式的响应数据即可,不用支持跨站请求

》技巧02:前端使用Angualr或者Ionic开发时可以使用一个配置文件配置一个代理服务器

免责声明:文章转载自《SpringBoot22 Ajax跨域、SpringBoot返回JSONP、CSRF、CORS》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇装mongodb在centos7上分页 算法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

session,ajax 跨域cookie

什么是Session, 什么是Cookie? Session是由应用服务器维持的一个服务器端的存储空间,用户在连接服务器时,会由服务器生成一个唯一的SessionID,用该SessionID为标识符来存取服务器端的Session存储空间。而SessionID这一数据则是保存到客户端,用Cookie保存的,用户提交页面时,会将这一SessionID提交到服务...

使用AJAX技术发送异步请求,HTTP服务端推送 --

使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换。 加上JavaScript和DOM(Document Object Model,文档...

js-ajax方法详解以及封装

本文主要从使用ajax请求的步骤、ajax状态码和http响应状态码以及ajax封装三个方面阐述 一、使用ajax请求的步骤 // 一、创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); // 二、规定请求的类型、URL 以及是否异步处理请求。 // method:get/post // url:请求地...

jsp页面中的代码执行加载顺序介绍

1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码。所以加载执行顺序是是java>jsp>js。 2. js在jsp中的加载顺序 页面上的js代码时html代码的一部分,所以页面加载的时候是由上而下加载。所以js加载的顺序也就是页面中<script>标...

Ajax动态滚动加载数据

看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现。 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定页数后,自动停止。用户点击继续查看后,再继续滚动。看看实现吧: 更新核心滚动代码: $(window).scroll(function(){...

火狐浏览器(firefox)中js要注意的问题

1.出现错误调用error方法或者ajax请求了多次,那么极有可能是异步请求的原因。 添加async : false , ->async. 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的success方法,这时候执行的是两个线程。 -> async 设置为 fals...