Springboot通过配置WebMvcConfig处理Cors非同源访问跨域问题

下面是详细的讲解。

什么是跨域？

跨域是指在浏览器的同源策略下，一个页面的脚本（包括JavaScript、Ajax等）访问另一个页面的数据时，出现了协议、域名或端口号不同的情况。如果不做任何处理，浏览器会阻止跨域请求，会产生“跨域问题”。

跨域解决方案

在前后端分离的项目中，开发人员经常会遇到跨域问题。解决跨域问题的方法很多，其中一种是使用CORS（跨域资源共享）。CORS允许服务器端在响应中添加一些特殊的HTTP头部来告诉浏览器，哪些请求可以被接受，从而允许跨域请求。

使用WebMvcConfig配置CORS

在SpringBoot项目中，可以通过配置WebMvcConfig类来实现处理CORS非同源访问跨域问题。具体步骤如下：

创建WebMvcConfig类

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
              .allowedOrigins("*")
              .allowedHeaders("*")
              .allowedMethods("*");
    }
}

上面的代码中，我们通过继承WebMvcConfigurerAdapter类，并重写addCorsMappings方法来配置CORS。其中addMapping方法表示允许所有请求都跨域访问，语法如下：

registry.addMapping("/**")

allowedOrigins方法表示允许跨域访问的源，这里设置为*，表示允许所有源，语法如下：

.allowedOrigins("*")

allowedHeaders方法表示允许跨域访问的请求头，这里设置为*，表示允许所有请求头，语法如下：

.allowedHeaders("*")

allowedMethods方法表示允许跨域访问的请求方法，这里设置为*，表示允许所有请求方法，语法如下：

.allowedMethods("*")

配置完成以后，我们的WebMvcConfig类应该是这样的：

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
              .allowedOrigins("*")
              .allowedHeaders("*")
              .allowedMethods("*");
    }
}

示例说明一：通过原生AJAX实现跨域请求

下面是一个使用原生AJAX实现跨域请求的示例：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
xhr.open('GET', 'http://localhost:8080/api/user', true);
xhr.send();

上面的代码中，我们使用XMLHttpRequest对象来发起一个GET请求，其中withCredentials属性被设置为true，表示允许跨域发送cookie，这里需要注意，服务器端也需要设置响应头来允许跨域请求带cookie。请求的URL是http://localhost:8080/api/user，如果需要使用POST请求或者修改请求头，在调用open方法之后可以设置。

示例说明二：通过jQuery封装的Ajax动态加载JSON数据

下面是一个使用jQuery封装的Ajax动态加载JSON数据的示例：

$.ajax({
    url: 'http://localhost:8080/api/user',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        console.log(response);
    }
});

上面的代码中，我们使用jQuery的$.ajax方法来发起一个GET请求，请求的URL是http://localhost:8080/api/user，数据类型是JSON格式，请求成功后打印响应结果。

通过上面两个示例，我们可以看到，使用SpringBoot配合WebMvcConfig配置CORS，可以轻松地解决跨域问题。