一、jsonp跨域
jsonp介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解。
0、引入jar包
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jersey</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency>
其他介绍就不多说了,开始上手吧。
1、继承AbstractJsonpResponseBodyAdvice类JsonpAdvice,并加上@RestControllerAdvice注解
/*RestControllerAdvice的值指定拦截的包名*/ @RestControllerAdvice("com.ctrl") public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback", "jsonp"); /*callback是url请求拦截的参数名,如果拦截成功会将返回数据传入函数执行回调函数*/ } }
2、创建ctrl类
package com.ctrl; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController public class HelloCtrl { @RequestMapping("/hello") public Map<String,Object> hello(HttpServletRequest request){ Map<String,Object>data = new HashMap<String,Object>(); data.put("suc", true); data.put("msg", "save suc"); data.put("param", request.getParameter("a") + "==" + request.getParameter("d")); return data ; } }
4、创建启动app类:
package com.services; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication(scanBasePackages="com") public class App { public static void main(String[] args) { SpringApplication.run(App.class, args); } }
5、前端调用:
<!DOCTYPE html> <html> <head> <title>jquery跨域实例</title> <!-- jquery版本可以不是3.2.1版本的 --> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { /* 这是快捷调用,callback 是advice中设置的,?是保留参数, jquery会替换掉这个问号 url可是不同于请求地址的任何url*/ $.getJSON("/hello?callback=?", function(data) { //$("#showcontent").text("Result:" + data) }); /*使用ajax方法调用*/ $.ajax({ type : "post", async : false, url : "/hello", dataType : "jsonp",//数据类型为jsonp data:{a:"b",d:"c"}, type:"POST", jsonp : "callback",//服务端用于接收callback调用的function名的参数 success : function(data) { $("#showcontent").text("Result:" + data.suc + " requestParam:" + data.param ) }, error : function() { alert('fail'); } }); }) </script> </head> <body> <div id="showcontent"></div> </body> </html>
服务器端也不一定要用spring 任何技术都可以,只要返回格式是下面的格式就可以,调用一个哈桑农户,出传入一个json或者是字符串就可以了。
/**/test01({"suc":true,"msg":"save suc"});
直接访问返回数据:
二、设置Response header跨域
设置三个Response header,可轻松实现跨域,这里可以在代码中设置,也可以在nginx中进行设置
//允许域名的网站请求 Access-Control-Allow-Origin:* //允许所有的方法请求 Access-Control-Allow-Methods:POST,GET //允许当前header的特殊值 Access-Control-Allow-Headers:x-requested-with,content-type
这样设置后,就可以使用ajax请求轻松跨域了
相关推荐
Spring框架提供了内置支持来处理CORS,使得开发者能够方便地配置跨域请求。本教程将深入探讨Spring提供的CORS解决方案,通过官方示例(demo)来阐述如何实现这一功能。 首先,我们要明白什么是跨域。跨域是指一个域...
本篇文章将通过一个具体的示例(JSP页面+后台实例)来详细介绍如何实现AJAX跨域请求。 #### 二、同源策略概述 同源策略(Same-origin policy)是浏览器的一项安全措施,用于限制一个源上的网页脚本与另一个源上的...
在Spring框架中处理JSONP跨域请求是一个常见问题,尤其当开发者需要从前端JavaScript代码中调用不同域上的RESTful服务时。由于浏览器的安全限制,同源策略防止了不同域的文档或脚本间的交互,这使得传统的AJAX请求不...
SpringCloud Gateway 提供了强大的跨域配置功能,通过配置可以实现跨域请求的控制。 首先,让我们了解什么是跨域请求。跨域请求是指从一个域名下的页面向另一个域名下的服务器发送请求时,会出现的安全限制问题。...
标题 "cors解决跨域web实例源码(结合网上改造)" 涉及的核心知识点是CORS(Cross-Origin ...通过这样的实例,开发者可以学习如何在实际项目中处理跨域请求,确保数据的安全传输,并且兼容不同的浏览器和客户端环境。
SpringMVC AJAX 跨域请求处理方法实例详解 本文主要介绍了 SpringMVC AJAX 跨域请求处理方法实例详解,解决了 AJAX 跨域请求问题。下面是详细的知识点解释: 一、什么是 AJAX 跨域请求? AJAX 跨域请求是指在不同...
layui表格跨域请求是网页应用中常见的需求,尤其是在前后端分离的开发模式下。layui是一款优秀的前端组件库,它的表格组件(layui-table)提供了丰富的功能,包括数据加载、排序、筛选等。当需要从不同源获取数据时...
Spring框架提供了解决这一问题的方法,使得前端(通常为Vue、React等)能够向后端(Spring MVC或Spring Boot应用)发送跨域请求。以下将详细讲解两种在Spring中设置跨域请求的方法。 1. 配置类设置 创建一个名为`...
其次,“跨域”意味着当请求的URL与当前页面URL的域名、端口或协议不一致时,浏览器会认为这是跨域请求。例如,一个在www.example.com上的网页试图通过Ajax请求获取www.anotherexample.com的数据,就会触发跨域问题...
Spring Boot 跨域设置实例详解 跨域设置是指从一个域名的网页去请求另一个域名的资源。这种情况下,浏览器默认不允许跨域访问,包括我们平时ajax也是限制跨域访问的。产生跨域访问的情况主要是因为请求的发起者与...
本实例将探讨如何通过JSONP(JSON with Padding)解决JavaScript的跨域请求,同时介绍在J2EE环境中如何添加和使用日志文件来跟踪系统运行状态。 首先,我们来看**JS跨域**。跨域主要涉及两个技术:CORS(Cross-...
在上面的代码中,我们可以看到一个简单的cors filter实现,用于处理跨域请求。 CorsFilter类实现了Filter接口,重写了doFilter方法,在这个方法中,我们可以看到对跨域请求的处理逻辑。首先,我们需要判断当前请求...
- 跨域问题处理:SpringBoot可以通过CORS配置允许跨域请求,Vue.js端也可以配置代理解决跨域问题。 4. **项目构建与部署**: - 使用Maven或Gradle作为项目构建工具,管理依赖关系。 - SpringBoot项目打包成可...
1. **CORS Filter**:这是最常见的方式,通过添加一个名为`CORSFilter`的过滤器,可以在Tomcat中处理跨域请求。`tomcat-cross-origin-filter.jar`文件很可能包含了一个实现此功能的过滤器类。你需要将这个jar包添加...
本文将通过实例代码,介绍 Spring Boot 实现跨域访问的知识,并详细介绍 Spring Boot 服务器端设置允许跨域访问的方法。 首先,需要了解什么是跨域访问。跨域访问是指从一个域名下的网页去请求另一个域名下的资源,...
比如 a页面想获取b页面的资源,a与b页面的协议、域名或端口号不同,进行的访问行为都是跨域,由于浏览器的同源策略,会限制跨域请求资源。 Java 中的跨域问题指的是在使用 Ajax 技术进行跨域访问时,由于浏览器的...
标题 "12 spring boot Security Jwt 前后端分离跨域登录" 提示我们这个项目是关于使用Spring Boot Security和JWT(JSON Web Tokens)技术来实现一个前后端分离的跨域登录系统。在这个系统中,Spring Boot作为后端...
在这个项目中,Spring MVC 负责接收用户登录请求,处理请求,并返回相应的视图。 **Spring Security** Spring Security 是一个强大的安全框架,用于保护Web应用免受各种攻击。在这个项目中,它被用来实现用户身份...
确保SSO系统能够处理跨域请求是非常重要的。这可能需要配置CORS(Cross-Origin Resource Sharing)策略。 6. **服务端点安全**:Spring WS本身就是面向服务的,所以服务端的安全性同样重要。配置Spring Security对...
总结来说,"Spring MVC Hessian Maven简单实例"展示了如何结合这三个技术来创建一个能够跨域调用远程服务的应用。通过Spring MVC处理HTTP请求,使用Hessian进行高效的远程方法调用,以及通过Maven管理项目依赖,使得...