在开发Web应用时，跨域问题常常困扰开发者，特别是在React前端和Spring后端结合的项目中。跨域是由浏览器的同源策略所引起的，限制了JavaScript从不同的源加载资源。本文将详细介绍如何在React和Spring环境中解决这个问题。
React在开发过程中遇到跨域问题主要是因为创建React应用时使用的`create-react-app`脚手架默认没有开启允许跨域的设置。针对这个问题，通常在`package.json`文件中添加`proxy`配置。例如，如果需要调用的API位于`http://api.xxxx.com`，可以在`proxy`字段下添加如下配置：
```json
"proxy": "http://api.xxxx.com"
```
这将使前端的HTTP请求代理到指定的服务器，从而规避同源策略。如果需要调用多个不同IP的接口，可以使用更复杂的配置，如下所示：
```json
"proxy": {
"/api/RoomApi": {
"target": "http://open.douyucdn.cn",
"changeOrigin": true
},
"/api/v1": {
"target": "http://capi.douyucdn.cn",
"changeOrigin": true
}
}
```
然而，上述React的配置只在开发环境下有效，生产环境需要另外的解决策略。
当React的配置无效或不适用时，我们需要在Spring后端进行跨域处理。Spring提供了一种叫做拦截器（Interceptor）的方式，可以处理HTTP请求的预处理和后处理。在这个例子中，我们可以创建一个名为`ProcessInterceptor`的类，实现`HandlerInterceptor`接口，如下：
```java
package com.gg.interceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;
public class ProcessInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
List<String> whiteList = new ArrayList<>();
whiteList.add("http://127.0.0.1:8000");
whiteList.add("http://localhost:8000");
String clientIp = request.getHeader("origin");
boolean status = false;
for (String ip : whiteList) {
if (clientIp != null && clientIp.equals(ip)) {
status = true;
break;
}
}
response.setHeader("Access-Control-Allow-Origin", status ? clientIp : null);
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
return true;
}
// 其他HandlerInterceptor的实现方法...
}
```
在`preHandle`方法中，我们检查请求的`origin`头部，如果来源在白名单内，我们将允许跨域的`Access-Control-Allow-Origin`设置为该来源。同时，我们还需要设置其他响应头，如`Access-Control-Allow-Methods`（允许的HTTP方法）和`Access-Control-Allow-Headers`（允许的请求头），以确保跨域请求的完整支持。
为了使这个拦截器生效，需要在Spring的配置中注册它。这通常在Spring Boot的配置类中完成，例如：
```java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new ProcessInterceptor());
}
}
```
通过上述步骤，React和Spring的跨域问题就可以得到妥善解决。在React前端通过代理配置解决开发环境的跨域问题，在Spring后端通过拦截器处理生产环境的跨域请求。注意，这些设置仅适用于允许特定源的跨域访问，若需允许所有源，可将`Access-Control-Allow-Origin`设置为`*`，但这可能带来安全风险。因此，建议根据实际需求谨慎配置。
