120_springboot处理跨域

最新推荐文章于 2024-08-01 08:00:00 发布

谦虚的兔子

最新推荐文章于 2024-08-01 08:00:00 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： springboot处理跨域

本文链接：https://blog.youkuaiyun.com/zs345048102/article/details/97373354

Java 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种在Spring Boot应用中解决跨域问题的方法，通过在Application中增加CorsFilter Bean，允许任何域名、头和方法的跨域请求。同时提供了一个简单的HTML测试页面，用于测试GET和POST请求的跨域功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.处理跨域

Application中增加如下方法即可：

    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.web.servlet.ServletComponentScan;
    import org.springframework.context.annotation.Bean;
    import org.springframework.scheduling.annotation.EnableScheduling;
    import org.springframework.transaction.annotation.EnableTransactionManagement;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;

    /**
     * 处理跨域
     */
    @Bean  
    public CorsFilter corsFilter() {  
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();  
        source.registerCorsConfiguration("/**", buildConfig()); // 4  
        return new CorsFilter(source);  
    }
    private CorsConfiguration buildConfig() {  
        CorsConfiguration corsConfiguration = new CorsConfiguration();  
        corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允许任何头
        corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等） 
        return corsConfiguration;  
    }

2.简单测试，以下代码保存到一个html文件中，url换成自己的，直接双击打开，点击发送get请求、发送post请求进行测试：

<!DOCTYPE html>
<html>
<head>
    <title>跨域测试</title>
</head>
<body>
    <button onclick="sendGet()">发送get请求</button>
    <button onclick="sendPost()">发送post请求</button>
</body>
</html>

<script type="text/javascript">

    function sendGet(){
        var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', 'http://localhost:8051/msg/country/code', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var json = httpRequest.responseText;//获取到json字符串，还需解析
                console.log(json);
            }
        };
    }
    
    function sendPost(){
        var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
        httpRequest.open('POST', 'http://localhost:8051/msg/mobile/code/global', true); //第二步：打开连接
        httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
        httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
                var json = httpRequest.responseText;//获取到服务端返回的数据
                console.log(json);
            }
        };
    }
    

</script>