SpringBoot-12-之Ajax跨域访问全解析-阿里云开发者社区

开发者社区> 张风捷特烈> 正文

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

简介: 一.什么是跨域呢? 1.引入: 先讲个故事:从前一个叫8080的大佬和一个8081的大佬各占一方天地,还有一个叫浏览器的大佬和8080还有8081关系都不错。
+关注继续查看

一.什么是跨域呢?

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.调用方:隐藏跨域--越过浏览器
暂略

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringBoot-18-之AOP+log4j 记录访问请求信息
org.springframework.boot spring-boot-starter-aop log4j log4j 1.
1072 0
Java Spring Boot 2.0性能监控实战与Actuator机制解析
Java Spring Boot 2.0 性能监控 实战与 Actuator 机制解析: 内容摘要:应用程序性能监控和日志采集管理是非常重要问题,Java Spring Boot网站、API等应用程序如何进行远程性能监控、日志采集,远程控制,本次课程一起深入学习Actuator新特性与API机制。
3727 0
Spring Boot中@ConfigurationProperties注解实现原理源码解析
本文简述@ConfigurationProperties注解实现原理源码及源码解析
1123 0
Springboot之Actuator的使用解析
Springboot之Actuator的使用解析 Actuator是spring boot提供的对应用系统的自省和监控的集成功能,可以对应用系统进行配置查看、相关功能统计等。
1026 0
Spring Boot外部化配置实战解析
源码解析Spring Boot外部化配置实战。
9361 0
阿里云推出全球应用加速解决方案,快速提升跨域应用访问体验
近日,阿里云全球加速产品推出全球应用加速等多个新特性,融合云安全DDoS高防与WAF的安全防护能力,结合云解析智能DNS与GTM全局流量调度,保障企业全球应用部署的高质量、高安全、高可靠。另外邀请到在线互联网教育机构—豌豆思维,进一步分享了他们使用全球加速的经验。
567 0
SpringMVC访问静态资源的三种方式
 如果你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题。如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg的访问也就被拦截了。
1425 0
SpringBoot自动装配原理解析
本文包含:SpringBoot的自动配置原理及如何自定义SpringBootStar等 我们知道,在使用SpringBoot的时候,我们只需要如下方式即可直接启动一个Web程序: @SpringBootApplication public class DemoApplication { p...
11317 0
SpringBoot实战(四)之使用JDBC和Spring访问数据库
这里演示的是h2databse示例,所以简单的介绍普及下h2database相关知识 H2数据库是一个开源的关系型数据库。 H2是一个嵌入式数据库引擎,采用java语言编写,不受平台的限制,同时H2提供了一个十分方便的web控制台用于操作和管理数据库内容。
2223 0
+关注
张风捷特烈
安卓工程师,全站工程师
91
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载