2. it
  3. SpringBoot-12-之Ajax跨域访问全解析

SpringBoot-12-之Ajax跨域访问全解析

mac2022-06-30  115

一.什么是跨域呢?

1.引入：

先讲个故事：从前一个叫8080的大佬和一个8081的大佬各占一方天地，还有一个叫浏览器的大佬和8080还有8081关系都不错。浏览器和8080做着一件事(8080端应用)，浏览器和8081做着另一件事(8081端应用)，但8080和8081却没有什么交集。有一天8081什么话也没说，就跑到8080的地盘拿东西(ajax返回的数据)，浏览器手下的警卫员说："这种珍贵的东西，无凭无据的，我们可不能给你"(跨域访问错误)。

8081气愤离去，心想："老子可是大佬,还要凭据，于是打电话给8080。"他们商量了一下,8080说：“警卫也是完成自己分内的事，那好吧，我把东西用保险箱(javascript)包裹起来(json转化为jsonp)，警卫就不认得了，你回去用我们约定的密码(callback)打开就行了。”(使用jsonp实现跨域)。

这种方法确实可行，一段时间后，两个大佬觉得挺麻烦的，8080说，给你个令牌（响应头上增加相应字段）算了，那着令牌警卫就不会拦你了。果然，简单了许多。

又过了一段时间，8081想："我是大佬哎，让我每天拿着令牌进进出出，这不损我形象吗?"打电话给8080，说："既然咱们都是大佬，还让警卫操心干嘛，以后我直接去找你，咱俩喝喝茶，聊聊天不是更好。"经过一段时间的接触，8080和8081关系也不错了，8080爽快地答应了。(隐藏跨域,大佬背后交接)

跨域错误.png
2.为什么?
[1] 浏览器出于安全的限制，而不是服务器 [2] 跨域:协议/域名/端口必须一致 [3] XHR请求(XMLHttpRequest)

二.解决思路

1： 浏览器放方：8080大佬让浏览器警卫队不要阻拦
浏览器不校验跨域.png
2： jsonp：需要后端修改数据格式，前端修改接受方式
普通ajax请求的Type是：xhr 返回的是json字符串 jsonp的ajax请求的Type是：script 返回的是js脚本 url后有一段callback参数 json和jsonp.png

点击各种url查看：

jsonp返回的：动态创建是一段js脚本，用完再删除 /**/jQuery33103437422192155124_1532262222426({"data":"say Ok"}); json返回的：只是json {"data":"say Ok"}
jsonp实现步骤

后端:AbstractJsonpResponseBodyAdvice方法过时，没查到新的方法，但也能用

@ControllerAdvice public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice() { super("callback"); } }

8080端页面中：

<script> var baseUrl = 'http://localhost:8080/ajax';// jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;//每个测试用例耗时时间 //单元测试用例 it("jsonp", function (done) { var result;//保存返回结果 $.ajax({ url: baseUrl, dataType: "jsonp",//jsonp格式 // cache: true,//结果可被缓存 jsonp:'callback',//默认参数，与后端的callback字符串相对于 success: function (json) { result = json; } }); $.getJSON(baseUrl, function (data) { result = data; }); setTimeout(function () { expect(result).toEqual({ "data": "say Ok" }); done()//完成校验 }, 100); }) }); </script> jsonp.png

弊端

[1]服务器需要改动，若后端非己主宰，则无能为力 [2]只支持GET [3]发的不是XHR请求
3.令牌模式：

被调用方(服务端)：响应头上增加相应字段告诉浏览器允许

8081跨域的请求头有：Origin:http://localhost:8081

服务端打造令牌：Filter com.toly1994.ajaxser.AjaxserApplication

@SpringBootApplication public class AjaxserApplication { public static void main(String[] args) { SpringApplication.run(AjaxserApplication.class, args); } @Bean public FilterRegistrationBean registerFilter() { FilterRegistrationBean bean = new FilterRegistrationBean(); bean.addUrlPatterns("/*");//所有请求都经过这个Filter bean.setFilter(new CrosFilter());//设置过滤器 return bean; } }

com.toly1994.ajaxser.CrosFilter

package com.toly1994.ajaxser; import javax.servlet.*; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 作者：张风捷特烈 * 时间：2018/7/22:21:44 * 邮箱：1981462002@qq.com * 说明：CrosFilter */ public class CrosFilter implements javax.servlet.Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse rep = (HttpServletResponse) servletResponse; //允许8081访问:"http://localhost:8081"换为*表示允许所有 rep.addHeader("Access-Control-Allow-Origin", "http://localhost:8081"); //允许访问方法GET：GET"换为*表示允许所有 rep.addHeader("Access-Control-Allow-Methods", "GET"); filterChain.doFilter(servletRequest, rep); } @Override public void destroy() { } } 跨域方式.png
4.非简单请求:post json

4-1:简单请求：先执行，后判断

方法：GET HEAD POST header：无自定义头 Content-Type:rext/plain||multipart/form-data||application/x-www-form-urlencoded

4-2:非简单请求：后判断，先执行

put delete 方法的ajax 发送带有json格式的ajax请求 带自定义头的ajax

4-3:Post请求传Json

8080服务端暴露接口：com.toly1994.ajaxser.controller.AjaxController
@PostMapping(value = "/postJson") public ResultBean postJson(@RequestBody User user) { System.out.println(user); return new ResultBean("post:"+user.getName()); }
8081服务端调用接口：
it("postJson", function (done) { var result;//保存返回结果 $.ajax({ type:"post",//请求类型 url: baseUrl+"/postJson", contentType:"application/json;charset=UTF-8",//请求内容类型 data:JSON.stringify({name: "toly"}),//数据JOSN.stringify // cache: true,//结果可被缓存 success: function (json) { result = json; } }); setTimeout(function () { expect(result).toEqual({ "data": "post:toly"//预期结果 }); done()//完成校验 }, 100); }); }); post发送带有json格式的ajax请求.png

4-4:既然是Header原因，那就放行呗:com.toly1994.ajaxser.CrosFilter#doFilter

rep.addHeader("Access-Control-Allow-Headers", "Content-Type"); 请求成功.png

可以看到有两个请求，其中一个是OPTIONS的预检请求，下面一句对这个请求做缓存

com.toly1994.ajaxser.CrosFilter#doFilter rep.addHeader("Access-Control-Max-Age","3600");//一小时内缓存预检请求
5.带Cookie的跨域
8080服务端暴露接口：com.toly1994.ajaxser.controller.AjaxController
@GetMapping("/getCookie") private ResultBean getCookie(@CookieValue(value = "cookie") String cookie) { System.out.println("//"); return new ResultBean("getCookie:"+cookie); }
8081服务端调用接口：
//单元测试用例 it("getCookie", function (done) { var result;//保存返回结果 $.ajax({ type:"get",//请求类型 url: baseUrl+"/getCookie", xhrFields:{ withCredentials: true//发送ajax请求时加cookie }, success: function (json) { result = json; } }); setTimeout(function () { expect(result).toEqual({ "data": "getCookie:toly"//预期结果 }); done()//完成校验 }, 100); }); }); 8080种cookie.png cookie.png

既然是Credentials原因，那就放行呗:com.toly1994.ajaxser.CrosFilter#doFilter

rep.addHeader("Access-Control-Allow-Credentials","true");//允许cookie 请求成功.png

这只解决了8081的跨域，怎么能实现其他的呢?可以获取请求头中的Origin，动态设置。

HttpServletRequest req = (HttpServletRequest) servletRequest; String origin = req.getHeader("Origin"); if (!StringUtils.isEmpty(origin)) { rep.addHeader("Access-Control-Allow-Origin", origin); }

6.跨域带自定义头

8080服务端暴露接口：com.toly1994.ajaxser.controller.AjaxController
@GetMapping("/getHeader")// private ResultBean getHeader(@RequestHeader("x-header1") String header1, @RequestHeader("x-header2") String header2) { System.out.println(header1 + " " + header2); return new ResultBean(header1 + " " + header2); }
8081服务端调用接口：
it("getHeaders", function (done) { var result;//保存返回结果 $.ajax({ type:"get",//请求类型 url: baseUrl+"/getHeader", headers:{ "x-header1": "AAA" }, beforeSend: function (xhr) { xhr.setRequestHeader("x-header2","BBB") }, success: function (json) { result = json; } }); setTimeout(function () { expect(result).toEqual({ "data": "AAA BBB"//预期结果 }); done()//完成校验 }, 100); }); 自定义头错误.png
解决方案：添加头
//动态添加自定义头 String headers = req.getHeader("Access-Control-Request-Headers"); if (!StringUtils.isEmpty(headers)) { System.out.println(headers); rep.addHeader("Access-Control-Allow-Headers", headers); }
7.调用方：隐藏跨域--越过浏览器
暂略

转载于:https://www.cnblogs.com/toly-top/p/9781970.html

相关资源：JAVA上百实例源码以及开源项目
最新回复(0)