SpringBoot-10-CORS

最新推荐文章于 2024-09-10 18:50:14 发布

梦呓0104

最新推荐文章于 2024-09-10 18:50:14 发布

阅读量73

点赞数

分类专栏： SpringBoot 文章标签： ajax spring boot

本文链接：https://blog.csdn.net/weixin_43805402/article/details/113386077

版权

SpringBoot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

SpringBoot跨域资源共享CORS支持

传统的Ajax请求只能获取在同一域名下的资源，但是HTML5打破了这种限制，允许Ajax发起跨域请求。浏览器本身可以发起跨域请求的，比如可以链接一个外域的图片或者脚本，但是javascript脚本是不能获取这些外域资源内容的。

CORS是一个W3C标准，全称是“跨域资源共享”(Cross-origin resource sharing)，它允许浏览器向跨资源服务器发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。

这种CORS使用了一个额外的HTTP响应头来赋予当前user-agent(浏览器)获得非同源资源的权限，这里的非同源就是Cross-Origin的概念，这里的权限就是访问非同的资源权限。

如果访问协议、端口、host都相同则称之为同源，否则为非同源。

先验证一下不做任何配置能否进行跨域资源请求，这里的Ajax请求192.168.3.20是我本机的ip，虽然还是访问本机，但是用的不是localhost，所以host是不相同的。

@RequestMapping("/test")
public String testCORS() {
    return "test";
}

@GetMapping("/cors")
@ResponseBody
public String getCorsData() {
    return "cors data";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试跨域资源请求</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "GET",
                url: "http://192.168.3.20:8080/cors",
                dataType: "text",
                success: function (data) {
                    alert(data)
                }
            })
        });
    </script>
</head>
<body>
</body>
</html>

可以在控制台看到报错信息，这个请求因为CORS策略被阻塞。

如果要希望js请求可以获取跨域资源，就需要在配置类中增加允许跨域的请求，这里添加的是所有访问都可以跨域请求。

@Configuration
public class MyConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
}

梦呓0104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot-10-CORS

SpringBoot跨域资源共享CORS支持传统的Ajax请求只能获取在同一域名下的资源，但是HTML5打破了这种限制，允许Ajax发起跨域请求。浏览器本身可以发起跨域请求的，比如可以链接一个外域的图片或者脚本，但是javascript脚本是不能获取这些外域资源内容的。CORS是一个W3C标准，全称是“跨域资源共享”(Cross-origin resource sharing)，它允许浏览器向跨资源服务器发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。这种CORS使用了一个
复制链接

扫一扫

专栏目录