Springboot系列-CORS跨域问题

最新推荐文章于 2022-12-07 20:25:14 发布

Thinkao~

最新推荐文章于 2022-12-07 20:25:14 发布

阅读量186

点赞数

分类专栏： springboot系列文章标签： CORS CorssOrigin 跨域同源策略

本文链接：https://blog.csdn.net/wangxinyao1997/article/details/103724219

版权

springboot系列专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Springboot系列-CORS跨域问题

前言：项目开发中，若采用前后端分离的方式很容易出现跨域问题（，那么什么是跨域问题，浏览器的同源策略是如何解决的

同源策略

同源策略是由 Netscape 提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，比如现在所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同

同源策略是基于安全方面的考虑提出来的，但是在开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是 JSONP，但是JSONP有一个很大的局限性，就是只支持 GET 请求，不支持其他类型的请求，而 CORS（跨域源资源共享）（Cross-origin resource sharing）是一个 W3C 标准的浏览器技术的规范，可以避开浏览器的同源策略，这是 JSONP 模式的现代版

在这里插入图片描述

跨域问题

那么如何通过springboot来解决跨域问题呢？

首先创建两个简单的springboot项目：
（1）provider 提供服务，配置端口8080，提供两个hello接口，分别为get ，post 如下：

@RestController
public class ProviderController {

    @GetMapping("/hello")
    public String hello1(){
        return "Get hello";
    }

    @PostMapping("/hello")
    public String hello2(){
        return "Post hello";
    }
}

（2） consumer消费服务，配置端口8081 ，在resource下面static下创建hello.html文件，发送ajax请求，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>
<script  type="text/javascript" src="js/jquery-3.3.1.js"></script>

<input type="button" onclick="btnClick()" value="get_button">
<input type="button" onclick="btnClick2()" value="post_button">

<script>

    function btnClick() {
        $.get('http://localhost:8080/hello', function (msg) {
            $("#app").html(msg);
        });
    }

    function btnClick2() {
        $.post('http://localhost:8080/hello', function (msg) {
            $("#app").html(msg);
        });
    }
</script>

</body>
</html>

（3）分别启动provider和customer项目，发送两个按钮请求，打开浏览器控制台运行结果如下：
在这里插入图片描述

可以看到，由于同源策略的限制，请求无法发送成功

解决跨域

接下来可以使用 CORS 实现跨域，首先可以通过 @CrossOrigin 注解配置某一个方法接受某一个域的请求，在 provider 中如何配置如下：

@RestController
public class ProviderController {

    @CrossOrigin(value = "http://localhost:8081")
    @GetMapping("/hello")
    public String hello1(){
        return "Get hello";
    }

    @CrossOrigin(value = "http://localhost:8081")
    @PostMapping("/hello")
    public String hello2(){
        return "Post hello";
    }
}

此上@CrossOrigin注解表示两个接口均接受来自 http://localhost:8081 的请求，配置完成后重新启动provider，发送请求，consumer就可以拿到数据，此时打开浏览器网络控制台如下：

在这里插入图片描述

这个表示服务端愿意接收来自 http://localhost:8081 的请求，如果每个接口都要加上@CrossOrigin的话过于繁琐，所以在 Spring Boot 中，还可以通过全局配置解决这个问题，全局配置可在 SpringMVC 的配置类中重写 addCorsMappings 方法即可，如下：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}

/** 表示此项目所有方法都会去处理跨域请求，allowedMethods 表示允许通过的请求数，allowedHeaders 则表示允许的请求头

结语：关于在springboot中如何处理跨域问题，就介绍到这，但是关于跨域带来的弊端还是存在的，常见的就是 CSRF（Cross-site request forgery）跨站请求伪造，类似于是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法，这里不再多说…