Spring 跨域请求实例 博客分类: Java
程序员文章站
2024-03-19 10:25:40
...
一、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 跨域请求实例 博客分类: Java
-
springboot2.4.1跨域设置的变化 博客分类: spring boot 实践笔记 springboot2.4.1跨域
-
java 请求跨域问题解决方法实例详解
-
java 请求跨域问题解决方法实例详解
-
Web安全测试之跨站请求伪造(CSRF)篇(图) 博客分类: 网络安全实例 Web软件测试单元测试网络应用浏览器
-
springboot2.4.1跨域设置的变化 博客分类: spring boot 实践笔记 springboot2.4.1跨域
-
@Marked-CORS跨域请求:前后端分离 博客分类: JavaWeb 跨域
-
详解java 中Spring jsonp 跨域请求的实例
-
Java利用cors实现跨域请求实例
-
详解java 中Spring jsonp 跨域请求的实例