Spring boot 跨域请求实现方式汇总

蚩尤后裔-汪茂雄

已于 2022-12-18 15:58:53 修改

阅读量5.9k

点赞数 11

于 2019-03-13 09:37:20 首次发布

本文链接：https://blog.csdn.net/wangmx1993328/article/details/88524163

版权

Spring Boot 专栏收录该内容

41 篇文章 22 订阅

订阅专栏

跨域请求概述与限制

方式1：Jsonp 解决跨域

方式2：HttpServletResponse 设置响应头跨域

方式3：自定义 servlet 过滤器 filter 实现全局跨域

方式4：CorsFilter 跨域请求全局过滤器

方式5：重写 WebMvcConfigurer(全局跨域)

方式6：@CrossOrigin 注解 (局部跨域)

方式7：Nginx 解决请求跨域

跨域请求概述与限制

1、前后端数据交互经常会碰到请求跨域，浏览器为了安全使用了“同源策略”

2、同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者全部相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

3、不符合同源策略的请求即为“跨域”。

4、同源策略限制内容有：

1）无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2）无法接触非同源网页的 DOM

3）无法向非同源地址发送 AJAX 请求

5、如下三个标签允许跨域加载资源，这也就是平时为什么可以使用 CDN 地址加载网络上的 JQuery、Bootstrap 的原因：

<img src=XXX>
<link href=XXX>
<script src=XXX>

6、跨域并不是请求发不出去，而是请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

7、跨域的本质是浏览器为了安全而阻止用户读取另一个域名下的内容，所以表单可以进行跨域请求，因为表单不会获取新的内容，而 Ajax 则会被浏览器拦截结果，因为 Ajax 会获取响应，浏览器认为这不安全，所以拦截了响应。

8、这也说明了跨域并不能完全阻止 CSRF(Cross-site request forgery）跨站请求伪造，因为请求毕竟是发出去了，而且服务端也接收到了请求。

常见跨域场景

1、当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域，不同域之间相互请求资源，就算作“跨域”。

URL	描述	是否跨域
http://www.tiger.com/a.js http://www.tiger.com/b.js	协议、域名、端口相同	否
http://www.tiger.com/app1/a.js http://www.tiger.com/app2/b.js	协议、域名、端口相同，应用不同	否
http://www.tiger.com:8080/a.js http://www.tiger.com/b.js	协议、域名相同，端口不同	是
https://www.tiger.com/a.js http://www.tiger.com/b.js	协议不同、域名、端口相同	是
http://www.tiger.com/a.js http://115.25.183.45/b.js	协议、端口相同，域名不同	是
http://www.tiger.com/a.js http://cloudServer.tiger.com/b.js	协议、端口相同，主域名相同，子域名不同	是

2、浏览器只会通过“URL 首部”来识别而不会根据域名对应的 IP 地址是否相同来判断，“URL 首部”可以理解为“协议, 域名和端口必须匹配”。

3、无论哪种解决方案，最终目的都是修改响应头，向响应头中添加浏览器所要求的数据，进而实现跨域。

方式1：Jsonp 解决跨域

1、JSONP(JSON with Padding-填充 JSON)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题

2、JSONP 原理：利用 script 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据，JSONP 请求一定需要对方的服务器做支持才可以。

3、JSONP 和 AJAX 相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式，但 AJAX 属于同源策略，JSONP 属于非同源策略（跨域请求）

4、JSONP 优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题，缺点是 JSONP 仅支持 get 请求，不支持其它的 POST 等请求，不安全可能会遭受 XSS 攻击。

5、关于纯 JSONP 的实现流程可以参考：九种跨域方式实现原理

6、本文直接介绍最简单快捷的方式，使用 JQuery 的 $.ajax 类发送 get 请求，指定 jsonp 格式返回。

Jsonp - 前端 JavaScript 在线演示源码：https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/InfoController.java

1、 $.ajax({jsonp:"callback"}) 的值会自动拼接在 $.ajax({url:"xxx"})地址中，自己可以指定任意的值，当不写 jsonp 属性时，JQuery 默认也是使用 "callback" 作为值。

2、$.ajax({jsonp:"callback"}) 的值服务器端是要获取然后封装值返回的，如 callback({"name":"zhangSan"})；后台返回的 json 数据必须放在 callback(xxx) 中。所以跨域请求时，前后端一定要商量好，仅仅只是前端使用了 jsonp ，服务器没有特殊处理时，也是不行的。

Jsonp - 后端 - java 在线演示源码：https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/InfoController.java

方式2：HttpServletResponse 设置响应头跨域

1、CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），它允许浏览器向跨源(协议 + 域名 + 端口)服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

2、CORS 需要浏览器和后端同时支持，浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域，与前端代码无关。

3、服务器响应客户端的时候，带上 Access-Control-Allow-Origin 头信息则可以开启 CORS，该属性表示哪些域名可以访问资源，通配符 “*” 表示所有网站都可以访问此资源。

response.setHeader("Access-Control-Allow-Origin", "*");    #允许所有域名的脚本访问该资源
response.setHeader("Access-Control-Allow-Origin", "http://192.168.1.20:55555");  #允许指定的域名的脚本访问该资源

指定某个具体的域名可以访问时，根据同源策略只需要写协议:/域名:端口即可，不需要指定应用。

4、如上所示浏览器 F12 开发者工具中随便点击一个请求，就可以看到很多服务器设置的就是允许所有来源的脚本进行访问。

5、Access-control-Allow-Origin 多域名设置：头信息中的 Access-Control-Allow-Origin 只允许一个值，所以不能用逗号分隔多个值，如下所示是错误的：

Access-Control-Allow-Origin: https://www.google.com,https://www.baidu.com

推荐思路是自己使用 List、Set、Array 等容器存放所有可以访问的域名当做白名单，以后当有请求时动态判断此域名是否在白名单之内，是则放行，否则不处理，客户端也就无法访问成功。

这里有个点：如何获取请求的源呢？即用户是从哪个 "协议://域名:端口 "的应用发起访问的呢？可以在浏览器中 F12 打开开发者工具看到请求的头信息中自动带了 Origin 信息，服务器只需要获取即可。

在线演示源码：
https://gitee.com/wangmx1993/java-se/blob/master/src/main/resources/static/cors/cors_response.html
https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/InfoController.java

6、通常只需要使用 Access-Control-Allow-Origin 就够用了，但是还可以设置以下其它的头信息：

    // 设置哪个源可以访问我
    res.setHeader('Access-Control-Allow-Origin', origin)
    // 允许携带哪个头访问我
    res.setHeader('Access-Control-Allow-Headers', 'name')
    // 允许哪个方法访问我
    res.setHeader('Access-Control-Allow-Methods', 'PUT')
    // 允许携带cookie
    res.setHeader('Access-Control-Allow-Credentials', true)
    // 预检的存活时间
    res.setHeader('Access-Control-Max-Age', 6)
    // 允许返回的头
    res.setHeader('Access-Control-Expose-Headers', 'name')

方式3：自定义 servlet 过滤器 filter 实现全局跨域

1、上面方式2的 HttpServletResponse 设置响应头信息，只能为每个方法单独设置，如果需要为整个应用进行设置，可以在过滤器中进行统一过滤设置。

2、Spring Boot @ServletComponentScan 扫描 @WebFilter 自定义过滤器，启动类上必须添 @ServletComponentScan 注解对 servlet 注解进行扫描，如 @WebServlet、@WebFilter、@WebListener，这样才会生效。

3、在线演示源码：
https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/MyCorsFilter.java
https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/JavaseApplication.java

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 自定义 servlet 过滤器全局设置跨域请求，与 {@link InfoController#postInfo} 完全同理，只是提升为全局设置
 * * 标准 Servlet 过滤器，实现 javax.servlet.Filter 接口，并重现它的 3 个方法
 * * filterName：表示过滤器名称，可以不写
 * * value：配置请求过滤的规则，如 "/*" 表示过滤所有请求，包括静态资源，如 "/user/*" 表示 /user 开头的所有请求
 *
 * @author wangMaoXiong
 * @version 1.0
 * @date 2021/6/6 10:02
 */
@WebFilter(filterName = "MyCorsFilter", value = {"/*"})
public class MyCorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("com.wmx.servlet.SystemFilter -- 系统启动...");
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
        //转为 HttpServletRequest 输出请求路径
        HttpServletRequest request = (HttpServletRequest) req;
        System.out.println("com.wmx.servlet.SystemFilter -- 过滤器放行前...." + request.getRequestURL());

        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

        filterChain.doFilter(req, res);
        System.out.println("com.wmx.servlet.SystemFilter -- 过滤器返回后...." + request.getRequestURL());
    }

    @Override
    public void destroy() {
        System.out.println("com.wmx.servlet.SystemFilter -- 系统关闭...");
    }
}

方式4：CorsFilter 跨域请求全局过滤器

1、提供一个自定义的 @Configuration 配置类，然后自定义 CorsFilter 过滤器，添加映射路径和具体的 CORS 配置路径。

2、前端在线演示源码（一个普通的 get 请求）：https://gitee.com/wangmx1993/java-se/blob/master/src/main/resources/static/cors/cors_filter.html

3、后端 CorsFilter 配置在线演示源码：https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/GlobalCorsConfig.java

4、注意 127.0.0.1 和 localhost 也会被当做不同的主机，多个时可以使用 addAllowedOrigin 多次添加添加。

方式5：重写 WebMvcConfigurer(全局跨域)

1、实现 WebMvcConfigurer(全局跨域) 重写 addCorsMappings 方法设置跨域映射。

2、在线演示源码：https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/MyWebMvcConfigurer.java

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 实现 WebMvcConfigurer(全局跨域) 重写 addCorsMappings 方法设置跨域映射
 *
 * @author wangMaoXiong
 * @version 1.0
 * @date 2021/6/6 8:08
 */
@Configuration
public class MyWebMvcConfigurer implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //CorsRegistration addMapping(String pathPattern): 添加路径映射，如 /admin/info，或者 /admin/**
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域, * 表示所有
                .allowedOrigins(new String[]{"http://127.0.0.1:63342","http://localhost:63342"})
                //放行哪些请求方式
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                //放行哪些原始请求头部信息
                .allowedHeaders("*");
                //暴露哪些头部信息，不能设置为 * : .exposedHeaders();
    }
}

方式6：@CrossOrigin 注解 (局部跨域)

1、@CrossOrigin 如果定义在类上，则对类中的所有方法生效，定义在方法上则对方法生效。

2、多种跨域方式配置同时存在时，优先级是采用就近原则。

3、在线演示源码：
https://gitee.com/wangmx1993/java-se/blob/master/src/main/java/org/example/cors/CrossOriginController.java
https://gitee.com/wangmx1993/java-se/blob/master/src/main/resources/static/cors/cross_origin.html

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
/**
 * @author wangMaoXiong
 * @version 1.0
 * @date 2021/6/6 8:37
 */
@RestController
public class CrossOriginController {
    /**
     * @CrossOrigin 如果定义在类上，则对类中的所有方法生效，定义在方法上则对方法生效，优先级是采用就近原则,属性如下：
     * String[] origins() default {}：允许哪些请求源可以访问，默认为 * 所有源都可以访问
     * String[] value() default {}：等同于 origins
     * String[] allowedHeaders() default {}：允许的请求头列表，默认为 * ，允许所有
     * String[] exposedHeaders() default {}：对外暴露的头信息，如 Cache-Control，Content-Language，等等，默认不会暴露任何信息
     * RequestMethod[] methods() default {}：允许的请求方式，默认为 get、post、head
     */
    @GetMapping("/crossOrigin/getInfo")
    @CrossOrigin(origins = "*")
    public Map<String, Object> getInfo() {
        Map<String, Object> dataMap = new HashMap<>(4);

        dataMap.put("code", 200);
        dataMap.put("msg", "success");
        dataMap.put("data", null);
        dataMap.put("times", System.currentTimeMillis());
        return dataMap;
    }
}

方式7：Nginx 解决请求跨域

Nginx 解决请求跨域：Nginx 解决请求跨域与配置 gzip 压缩_蚩尤后裔的博客-CSDN博客

蚩尤后裔-汪茂雄

关注

11
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
2
评论
Spring boot 跨域请求实现方式汇总

目录什么是跨域？常见跨域场景jsonp 跨域Jsonp - 前端 JavaScriptJsonp - 服务器Jsonp - 跨域测试Cors 跨域Cors - 前端 JavaScriptCors - 服务器Cors - 跨域测试Access-control-Allow-Origin 多域名设置什么是跨域？1、前后端数据交互经常会碰到请求跨域，...
复制链接

扫一扫