springBoot系列之九-----CORS实现跨域

最新推荐文章于 2024-07-03 07:00:00 发布

邢小白

最新推荐文章于 2024-07-03 07:00:00 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/weixin_40267415/article/details/103915768

版权

同源策略：

很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。
同源策略是由Netscape提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各种原因又经常有跨域的需求，传统的跨域方案是JSONP，JSONP虽然能解决跨域但是有一个很大的局限性，那就是只支持GET请求，不支持其他类型的请求，而今天我们说的CORS（跨域源资源共享）（CORS，Cross-origin resource sharing）是一个W3C标准，它是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，这是JSONP模式的现代版。
在Spring框架中，对于CORS也提供了相应的解决方案，今天我们就来看看SpringBoot中如何实现CORS。

实践：

首先呢需要准备两个springBoot项目：在一个项目中调用另一个项目的接口。

例如：

项目A

端口号：8080 中定义一个接口

@RestController
public class HelloController {


    @RequestMapping("/hello")
    public String   corsTest(){

        return "hello";
    }
}

项目B

端口号：8081

在前端页面通过ajax请求来访问项目A的这个hello接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<input type="button" value="GET" onclick="getTest()">
</body>
<script src="/jquery1.11.3.js"></script>
<script>
    function getTest() {

        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/hello',
            success: function (data) {
               $("#app").html(data);
            }
        })
    }
</script>
</html>

点击按钮请求时，按F12打开浏览器控制台，会发现以下错误。这就是跨域请求异常错误。

该怎样解决呢

在请求的接口，或者类上面加一个 @CrossOrigin 含义就是愿意接受那里的请求

例如：

@RestController
@CrossOrigin(origins = "http://localhost:8081")  //愿意接收这里的请求
public class HelloController {


    @RequestMapping("/hello")
    public String   corsTest(){

        return "hello";
    }
}

效果如下：

现在又有一个疑问如果有很多跨域请求，在每个类上面加这个注解是非常麻烦的。我们可以用配置类的方式来解决。

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  //那些接口允许跨域
        .allowedOrigins("http://localhost:8081")   //也可以配置多个请求域
                .allowedHeaders("*")    //允许通过的请求头
                 .allowedMethods("*")      //允许那些方法通过 例如：GET POST等
               .maxAge(30*1000);

    }
}

这个配置类就可以接受所有跨域请求了。

也可以通过CorsFilter 的方式来配置：

@Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /* 是否允许请求带有验证信息 */
        corsConfiguration.setAllowCredentials(true);
        /* 允许访问的客户端域名 */
        corsConfiguration.addAllowedOrigin("*");
        /* 允许服务端访问的客户端请求头 */
        corsConfiguration.addAllowedHeader("*");
        /* 允许访问的方法名,GET POST等 */
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }

具体选择看个人喜欢了

邢小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springBoot系列之九-----CORS实现跨域

同源策略：很多人对跨域有一种误解，以为这是前端的事，和后端没关系，其实不是这样的，说到跨域，就不得不说说浏览器的同源策略。同源策略是由Netscape提出的一个著名的安全策略，它是浏览器最核心也最基本的安全功能，现在所有支持JavaScript的浏览器都会使用这个策略。所谓同源是指协议、域名以及端口要相同。同源策略是基于安全方面的考虑提出来的，这个策略本身没问题，但是我们在实际开发中，由于各...
复制链接

扫一扫