Spring Boot CORS支持

Posted 2020-10-07

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

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

二、在SpringMVC中可以配置全局的规则，也可以使用@CrossOrigin 注解进行细粒度的配置。

1、使用全局配置的方式：

　　在端口为8080的应用中配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CustomCorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**").allowedOrigins("http://localhost:9090");//意思是允许端口为9090的引用访问localhost:8080/api/下所有的路径
            }
        };
    }
}

　　在端口为8080的应用中提供一个接口示例：

@RestController
@RequestMapping("/api")
public class ApiController {

    @PostMapping("/get")
    public Map<String, Object> get(String name) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        return map;
    }
}

　　在端口为9090的应用中提供一个访问入口：

<h1 id="title">跨域访问</h1>
<script type="text/javascript">
    $(function () {
        $("#title").click(function () {
            alert("click");
            $.ajax({
                url: "http://localhost:8080/api/get",
                type: "post",
                data: {
                    name: "测试"
                },
                success: function (data, status, xhr) {
                    console.log(data);
                    alert(data.name);
                }
            });
        });
    });
</script>

---------------------------------

　　全局配置的方式也可以采用继承的方式来实现：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

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

---------------------------------

　2、使用@CrossOrigin 注解进行细粒度的配置：

@RestController
@RequestMapping("/api")
public class ApiController {

    @CrossOrigin(origins = "http://localhost:8080")
    @PostMapping("/get")
    public Map<String, Object> get(String name) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", name);
        return map;
    }
}