• SpringBoot 跨域配置

    参考资料

    1. 阮一峰_CORS 通信
    2. 路人甲_跨域问题详解
    • 所有的跨域方案都是修改响应头，向响应头中添加浏览器所要求的数据，进而实现跨域。
    • CorsFilter和WebMvcConfigurer属于全局 CORS 配置，@CrossOrigin属于局部 CORS配置。
    • 如果使用了局部跨域是会覆盖全局跨域的规则，所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。

    前期准备

    • 前台html,使用Live Server运行,url为http://127.0.0.1:5500/跨域测试.html

      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域测试title>
head>
<body>
    <button id="btn">发送Ajax请求button>
body>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.js">script>
<script>

    // 封装Ajax请求
    function doAjax(url, data, callback) {
        $.ajax({
            url: url,
            type: 'POST',
            data: JSON.stringify(data),
            contentType : 'application/json;charset=utf-8',
            dataType: 'json',
            success: function (data, status, xhr) {
                if (!!callback) {
                    callback(data);
                }
            },
            error: function (xhr, textStatus, errorMessage) {

                if (xhr.status !== 400) {
                    console.log(xhr);
                }

                const data = xhr.responseJSON;
                callback(data);
            }
        });
    }

    $("#btn").click(() => {
		
		// 后台接口
        const url = "http://localhost:8080/test8/CORS_Test";
        const paramObject = {
            id: "100",
            name: "jmw"
        };
        doAjax(url, paramObject, function(data) {
            console.log(data);
        })
    });
script>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53

    • 后台实体类

      import lombok.Data;

@Data
public class Test8Form {

    private String id;
    private String name;
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

    • 后台Controller层

      import com.example.jmw.form.Test8Form;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/test8")
public class Test8Controller {
    
    @PostMapping("/CORS_Test")
    @ResponseBody
    public Map<String, String> groupSequenceProvider(@RequestBody Test8Form form) {
		
		// 将前台跨域请求提交的数据,放到map中,然后再返回给前台
        HashMap<String, String> map = new HashMap<>();
        map.put("idFromWeb", form.getId());
        map.put("nameFromWeb", form.getName());

        return map;
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23

    • 没有配置允许跨域访问之前

      在这里插入图片描述

    1. CorsFilter实现全局跨域配置

    在任意配置类,返回一个 新的 CorsFIlter Bean,并添加映射路径和具体的CORS配置路径。

    springboot配置允许跨域访问代码实例
    pdf 0星 超过10%的资源 32KB
    下载
    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;

@Configuration
public class CustomCorsConfiguration {

    // 导入Cors的过滤器,在配置文件中进行配置
    @Bean
    public CorsFilter corsFilter(){

        // 初始化cors配置对象
        CorsConfiguration configuration = new CorsConfiguration();

        // 设置允许跨域的域名,如果允许携带cookie的话,路径就不能写*号, *表示所有的域名都可以跨域访问
        configuration.addAllowedOrigin("http://127.0.0.1:5500");
        // 设置跨域访问可以携带cookie
        configuration.setAllowCredentials(true);
        // 允许所有的请求方法 ==> GET POST PUT Delete
        configuration.addAllowedMethod("*");
        // 允许携带任何头信息
        configuration.addAllowedHeader("*");

        // 初始化cors配置源对象
        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();

        // 给配置源对象设置过滤的参数
        // 参数一: 过滤的路径 == > 所有的路径都要求校验是否跨域
        // 参数二: 配置类
        configurationSource.registerCorsConfiguration("/**", configuration);

        // 返回配置好的过滤器
        return new CorsFilter(configurationSource);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    ⏹效果
    在这里插入图片描述

    2. 重写WebMvcConfigurer实现全局跨域配置

    @Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        	registry.addMapping("/**")
            // 是否发送Cookie
            .allowCredentials(true)
            // 放行哪些原始域
            .allowedOrigins("*")
            // 放行哪些请求方式
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            // 放行哪些原始请求头部信息
            .allowedHeaders("*")
            // 暴露哪些头部信息
            .exposedHeaders("*");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    ⏹效果

    在这里插入图片描述

    3. @CrossOrigin局部方法跨域

    • 在控制器(类上)上使用注解@CrossOrigin,表示该类的所有方法允许跨域。

      import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/test8")
@CrossOrigin(origins = "http://127.0.0.1:5500")
public class Test8Controller {
    
    @PostMapping("/CORS_Test")
    @ResponseBody
    public Map<String, String> groupSequenceProvider(@RequestBody Test8Form form) {

        HashMap<String, String> map = new HashMap<>();
        map.put("idFromWeb", form.getId());
        map.put("nameFromWeb", form.getName());

        return map;
    }
}	

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

      ⏹效果

      在这里插入图片描述

    • 在方法上使用注解@CrossOrigin,仅允许该方法跨域

      import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/test8")
public class Test8Controller {

    @CrossOrigin(origins = "http://127.0.0.1:5500")
    @PostMapping("/CORS_Test")
    @ResponseBody
    public Map<String, String> groupSequenceProvider(@RequestBody Test8Form form) {

        HashMap<String, String> map = new HashMap<>();
        map.put("idFromWeb", form.getId());
        map.put("nameFromWeb", form.getName());

        return map;
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22

      ⏹效果

      在这里插入图片描述

  • 相关阅读:
    Liuwei
    javaweb：mybatis：mapper(sql映射+代理开发+配置文件之设置别名、多环境配置、顺序+注解开发）
    如何提升LED显示屏显示效果？
    一个操作，轻松迁移 Maven 至 Gradle
    奥特曼autMan机器人安装，开启插件市场+对接QQ、微信、公众号教程
    kotlin的suspend对比csharp的async&await
    Python - 实现渐变色的RGB计算
    深度好文：How to get started in C++！
    C语言每日一题
    深入解析哈希表、哈希映射和并发哈希映射的区别，以及死锁的成因和解决方案
  • 原文地址：https://blog.csdn.net/feyehong/article/details/126335715