springboot中通过cors协议解决跨域问题

1、对于前后端分离的项目来说，如果前端项目与后端项目部署在两个不同的域下，那么势必会引起跨域问题的出现。

针对跨域问题，我们可能第一个想到的解决方案就是jsonp，并且以前处理跨域问题我基本也是这么处理。

但是jsonp方式也同样有不足，不管是对于前端还是后端来说，写法与我们平常的ajax写法不同，同样后端也需要作出相应的更改。并且，jsonp方式只能通过get请求方式来传递参数，当然也还有其它的不足之处，针对于此，我并没有急着使用jsonp的方式来解决跨域问题，去网上找寻其它方式，也就是本文主要所要讲的，在springboot中通过cors协议解决跨域问题。

2、Cors协议

H5中的新特性：Cross-Origin Resource Sharing（跨域资源共享）。通过它，我们的开发者（主要指后端开发者）可以决定资源是否能被跨域访问。

cors是一个w3c标准，它允许浏览器（目前ie8以下还不能被支持）像我们不同源的服务器发出xmlHttpRequest请求，我们可以继续使用ajax进行请求访问。

具体关于cors协议的文章，可以参考http://www.ruanyifeng.com/blog/2016/04/cors.html 这篇文章，讲的相当不错。

3、在springboot中如何通过cors协议解决跨域问题

springmvc4.2版本增加了对cors的支持。

目前我所做的项目基本都是springboot进行开发，所以我这里贴下在springboot中的使用。

@Configuration
public class MyWebAppConfigurer extends WebMvcConfigurerAdapter{

    @Override
    public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/api/**")
           .allowedOrigins("*")
           .allowedMethods(RequestMethod.POST.name())
           .allowCredentials(true)
           .maxAge(60 * 30);
    }
}

上面这种是针对全局配置，如果你想做到更细致也可以使用@CrossOrigin这个注解在controller类中使用。

@CrossOrigin(origins = "*", allowedHeaders = "*", allowCredentials = "true", maxAge = 60 * 30)
@PostMapping(value = "/v1/crossplatform/order/state", consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, produces = "text/html;charset=UTF-8")

这样就可以指定“/v1/crossplatform/order/state”’能处理跨域的请求了。

4、前端js代码示例

$.ajax({
                url: 'http://10.82.13.116:8080/zlgxwl/v1/crossplatform/order/state',
                type: 'POST',
                contentType: "application/json",
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                data: JSON.stringify(params),
                success: function (res) {          
                     
                }
            })

其中 withCredentials: true 表示浏览器会附带Cookie信息给服务器；服务端的 allowCredentials = true ，两个条件缺一不可，否则即使服务器同意发送Cookie，浏览器也无法获取。

springboot 跨域cors配置

springboot中通过cors协议解决跨域问题

猜你喜欢