开发者社区> 张风捷特烈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

相关文章
Ajax跨域解决方案
讲述跨域原因以及从原理上讲述两种解决方案:jsonp,options
4592 0
ajax 跨域----好用的解决方案
一、前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下。个人见识有限,如有差错,请多多见谅 二、前言 关于跨域,有N种类型,本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源...
1974 0
ajax跨域和js跨域解决方案 .
  ajax跨域和JS的跨域通信(Cross The Site)的几种解决方案     最近做的一个项目中需要ajax跨域取得数据,如果是在本域中确实没有问题,但是放到二级域和其他域下浏览器直接就弹出提示框:“该页正在 1.什么引起了ajax跨域不能的问题 ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告。
1040 0
jQuery Ajax 简单的实现跨域请求
jQuery Ajax 简单的实现跨域请求
127 0
jquery ajax loading效果
$(function() { $("#loading_img").click( function() { $.ajax({ type:"GET", url:"demo.php", data:"name=wuxiaoyong", beforeSend:loading,//执行ajax前执行loading函数.
688 0
asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
首先贴上Jquery的ajax:   代码 $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType...
933 0
[原创]开发一个适合Ajax+JSON+jQuery环境使用的多功能页码栏——jPagerBar-1.1.1
Demo:http://www.senparc.com/WebTools.xhtml/JPagerBar    jPagerBar1.2已发布,升级说明及Demo、源代码下载请见:http://www.cnblogs.com/szw/archive/2009/08/27/1555201.html       事由:由于最近在测试开发的一个ASP.NET MVC的项目需要用到页码栏(并且需要用到AJAX+JSON传输数据),而微软发布的.NET3.5 CTP 的MVCTOOLKIT里面又没有提供,网上找了下似乎也没有太称心的,于是就自己动手做一个。
903 0
Jquery 中Ajax使用的四种情况
         $(document).ready(function(){   //Jquery 页面加载事件,当页面加载之后首先执行这个方法                  //第一种Ajax请求         $.
763 0
+关注
张风捷特烈
安卓工程师,全站工程师
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Spring框架入门
立即下载
Java Spring Boot开发实战系列课程【第15讲】:Spring Boot 2.0 API与Spring REST Docs实战
立即下载
杜万-Java reactive programming - Reactor 3 and Spring WebFlux
立即下载