转载-在 SpringBoot 中全局设置允许跨域请求

Bertha 。 2022-05-14 08:53 170阅读 0赞

### 转载出处 https://blog.csdn.net/larger5/article/details/79805617 ###

### 一、前言 ###

现在在团队做的项目都是前后端分离的，借助 swagger 进行前后端合作   
① 后台负责写数据处理的接口   
② 前台负责解析 JSON、设计界面

要实现接口可以给前端访问，还要设置允许跨域访问接口，正式本文的重点

> 前后端分离优缺点：   
> 一、为什么要前后端分离：   
> 1.后台接口可以 pc、app、pad 多端适应   
> 2.前端 SPA 开发模式开始流行   
> 3.前后端开发职责不清（如 `JSP/thymeleaf/freemarker/Django` 模板引擎渲染数据，到底是谁的工作？）   
> 4.前后端互相等待，不能同时进行开发   
> 5.前端一直配合着后端，能力受限   
> 6.后台开发语言和模板高度耦合   
> 二、前后端分离缺点   
> 1.前后端学习门槛增加   
> 2.数据依赖导致文档重要性增加   
> 3.前端工作量加大   
> 4.SEO 的难度加大（ajax大量使用）

由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，   
浏览器认为这种访问不安全

### 二、代码 ###

package com.zcw.conf;
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.CorsConfiguration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    
    /**
     * 实现基本的跨域请求
     * @author linhongcun
     *
     */
    @Configuration
    public class CorsConfig {
        private CorsConfiguration buildConfig() {
            CorsConfiguration corsConfiguration = new CorsConfiguration();
            corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
            corsConfiguration.addAllowedHeader("*"); // 允许任何头
            corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
            return corsConfiguration;
        }
    
        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
            return new CorsFilter(source);
        }
    }

### 三、其他 ###

以上的代码基本是常识了，记录一下，   
Ajax 请求示例：

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <script src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            function upd() {
                $.ajax({
                    type: "get",
                    data: "a=1",
                    url: "http://120.79.197.131:8080/user/getAllUser",
                    success: function(result) {
                        console.log(result);
                    }
                });
            }
        </script>
        <body>
            
            <button id="btn2" onclick="upd()">Get request 获取</button>
        </body>
    
    </html>

> 参考文章   
> [SpringBoot下如何配置实现跨域请求？][SpringBoot]

[SpringBoot]: https://blog.csdn.net/Colton_Null/article/details/75195230