前言
前端跨域问题是指当浏览器尝试从一个域名访问另一个域名的资源时，由于浏览器的同源策略限制，会导致请求被阻止。这种情况通常发生在前后端分离的项目中，前端和后端部署在不同的域名下。也就是两个域名协议，端口不一致就是跨域，比如8001端口的地址访问，80端口的地址。为了解决这个问题，可以通过以下两种方式进行配置：Nginx配置反向代理和spring的CorsWebFilter配置。
一、Nginx配置反向代理
Nginx是一个高性能的HTTP和反向代理服务器。通过配置Nginx，可以将前端的请求转发到后端服务器，从而绕过浏览器的同源策略限制。也就是所有请求暴露统一的一个地址，Nginx配置多个动态代理，后台网关进行转发到对应的服务。
具体配置步骤如下：
（1）安装Nginx
在服务器上安装Nginx，具体安装方法可以参考Nginx官方文档。
（2）配置Nginx
编辑Nginx的配置文件，通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default。在配置文件中，添加一个新的server块，用于处理前端的请求，并将请求转发到后端服务器。例如：
http {
server {
listen 80;
server_name baidu.com;
location / {
proxy_pass http://baidu.backend.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}（3）重启Nginx
保存配置文件后，重启Nginx服务以使配置生效。
二、Spring的CorsWebFilter配置
在Spring框架中，可以通过配置CorsWebFilter来解决前端跨域问题，允许了所有的外部形式的调用，这种方案也是开发中比较推荐的。具体配置步骤如下：
（1）添加依赖
在项目的pom.xml文件中，添加spring-web依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>（2）配置CorsWebFilter
在Spring Boot项目的主类中，添加一个WebMvcConfigurer的实现类，并重写addCorsMappings方法，用于配置CORS策略。例如：
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
/*允许访问的客户端域名*/
.allowedOrigins("*")
/*允许访问的方法名,GET POST等*/
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
//配置跨域
/*允许服务端访问的客户端请求头*/
.allowedHeaders("*")
/*是否允许请求带有验证信息*/
.allowCredentials(true)
.maxAge(3600);
}
};
}
}以上配置允许所有域名访问后端服务，并允许GET、POST、PUT、DELETE、OPTIONS等HTTP方法。可以根据实际需求进行调整。
以上两种方式，可以有效解决前端跨域问题。在实际项目中，可以根据具体需求和场景选择合适的方式进行配置。总的来说，对于后端开发而已，选择第二种方式，获取比较方便，也不容易出错，个人还是比较推荐在项目中去配置corsConfigurer。如果有其他解决方案，欢迎大家在评论家，一起讨论知道哦。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
