Springboot前后端分离项目配置跨域实现过程解析

下面我会详细讲解“Springboot前后端分离项目配置跨域实现过程解析”的完整攻略，过程中会包含两条示例说明。

什么是跨域？

在浏览器中，当页面的协议、域名、端口号有任意一个不同，都会被认为是不同的域，这就是跨域。浏览器出于安全性考虑，会限制页面中向其它域发送网络请求，这样会导致前后端分离项目中可能会出现的跨域问题。为了解决这个问题，我们需要了解一下如何配置跨域。

如何配置Springboot跨域？

Springboot中跨域的配置比较简单，只需要在后端controller中添加跨域注解即可。

在controller中添加注解：

@CrossOrigin(origins = "*",maxAge = 3600)
@RestController
@RequestMapping("/user")
public class UserController {

// Code here

}

其中，@CrossOrigin(origins = "*",maxAge = 3600)表示允许所有的跨域请求，并且缓存60分钟内的跨域请求。

如果需要更加详细的配置，可以使用@CrossOrigin注解的各个参数进行配置，例如：

@CrossOrigin(origins = {"http://localhost:8080","http://192.168.1.1:8080"}, maxAge = 3600, allowedHeaders = "*", allowCredentials = "true", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE})
@RestController
@RequestMapping("/user")
public class UserController {

// Code here

}

其中各个参数的说明如下：

origins：表示允许跨域访问的域名列表，可以使用通配符*表示允许所有域名访问。
maxAge：表示响应的最大缓存时间，单位为秒，需要注意的是该配置主要用于设置Preflight请求的响应信息。
allowedHeaders：表示允许的请求头信息，使用通配符*表示允许所有请求头。
allowCredentials：表示是否允许携带Cookie等凭据信息，在实际应用中，如果需要携带凭据信息，则需要将该参数的值设为true。
methods：表示允许的请求方法。

示例说明

示例一

我们假设后端的Springboot应用运行在http://localhost:8080，前端的React应用运行在http://localhost:3000，接下来我们来演示一下如何进行跨域配置。

后端配置

在后端controller中添加跨域注解：

@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping("/user")
public class UserController {

// Code here

}

该配置表示允许http://localhost:3000域下的所有请求进行跨域访问。

前端请求

在前端发送请求时，只需要设置请求头即可。例如：

fetch('http://localhost:8080/user', {
   method: 'GET',
   credentials: 'include',
   headers: {
     'Content-Type': 'application/json',
     'Authorization': 'Bearer ' + localStorage.getItem('token')
   }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));

在请求头中设置了Content-Type和Authorization两个请求头，这两个请求头也需要在后端的允许范围内，否则会被浏览器拦截。

示例二

我们假设前端的Vue应用运行在http://localhost:8080，使用了axios库进行网络请求，后端的Springboot应用运行在http://localhost:9090，接下来我们来演示一下如何进行跨域配置。

后端配置

在后端controller中添加跨域注解：

@CrossOrigin(origins = "http://localhost:8080")
@RestController
@RequestMapping("/user")
public class UserController {

// Code here

}

前端配置

在前端的请求中设置好网络请求地址即可。例如：

axios({
  url: 'http://localhost:9090/user',
  method: 'get',
  headers: {'Content-Type': 'application/json'}
}).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

如上所述，我们可以使用axios库发送跨域请求，只需要在请求头中设置Content-Type即可。这里需要注意的是，axios的默认请求是Ajax，而浏览器对于Ajax请求和普通请求的处理方式有所区别，因此需要对参数进行一些设置，例如设置withCredentials表示允许携带凭据信息。