Spring Boot - Web 应用开发 - CORS

╰+哭是因爲堅強的太久メ 2022-05-29 04:45 93阅读 0赞

Web 开发经常会遇到跨域问题，解决方案有：jsonp，iframe，CORS 等等

# 1. CORS 与 JSONP 比较 #

1.  JSONP 只能实现 GET 请求，而 CORS 支持所有的 HTTP 请求。
2.  使用 CORS，开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据，比起 JSONP 有更好的错误处理。
3.  JSONP 主要被老的浏览器支持，它们往往不支持 CORS，而绝大多数现代浏览器都已经支持了 CORS

# 2. 在 Spring MVC 中可以配置全局的规则，也可以使用 @CrossOrigin 注解进行细粒度的配置 #

全局配置：

@Configuration
    public class CustomCorsConfiguration { 
    
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/api/**").allowedOrigins("http://loclahost:8080");
                    super.addCorsMappings(registry);
                }
            };
        }
    }

或者是：

public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter { 
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
        }
    }

定义方法：

@RestController
    @RequestMapping("/api")
    public class ApiController { 
    
        @RequestMapping(value = "/get")
        public HashMap<String, Object> get(@RequestParam String name) {
            HashMap<String, Object> map = new HashMap<>();
            map.put("title", "hello world");
            map.put("name", name);
            return map;
        }
    }

测试 Ajax

$.ajax({
        url: "http://localhost:8081/api/get",
        type: "POST",
        data: { name: "测试" },
        success: function (data, status, xhr) { console.log(data); alert(data.name); }
    });

细粒度配置：

@RestController
    @RequestMapping(value = "/api", method = RequestMethod.POST)
    public class ApiController { 
    
        @CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/get")
        public HashMap<String, Object> get(@RequestParam String name) {
            HashMap<String, Object> map = new HashMap<>();
            map.put("title", "hello world");
            map.put("name", name);
            return map;
        }
    }