前后端分离跨域问题解决

### 若依框架前后端分离跨域问题解决方案 #### CORS简介 跨域资源共享（CORS，Cross-Origin Resource Sharing）是一种机制，它允许浏览器向不同源的服务器发出 XMLHttpRequest 请求。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互[^1]。 #### 若依框架中的跨域解决方式 在若依框架中，可以通过多种方式进行跨域配置： 1. **使用 `@CrossOrigin` 注解** 在 Controller 层的方法或类上添加 `@CrossOrigin` 注解可以实现单个接口或整个控制器的跨域支持。例如： ```java @RestController @RequestMapping("/example") @CrossOrigin(origins = "http://localhost:8080", maxAge = 3600) public class ExampleController { @GetMapping("/test") public String test() { return "Test Success"; } } ``` 上述代码表示 `/example/test` 接口允许来自 `http://localhost:8080` 的跨域请求，并设置缓存时间为 3600 秒[^4]。 2. **全局配置 CORS 过滤器** 可以通过创建一个自定义的 Web 配置类来实现全局范围内的跨域支持。以下是具体实现方法： ```java import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有的路径生效 .allowedOrigins("*") // 允许所有域名访问 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 支持的 HTTP 方法 .maxAge(3600L); // 缓存时间 (单位秒) } @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8080"); } }; } } ``` 此种方式适用于需要统一管理跨域规则的情况[^3]。 3. **Nginx反向代理** 如果不想修改后端代码，也可以通过 Nginx 来解决跨域问题。配置如下： ```nginx server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://backend-server/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; } } ``` 使用此方法可以让前端和后端看起来像是同一源，从而规避跨域问题[^2]。 #### 注意事项 - 当前主流推荐的方式是采用 CORS 技术，因为它更加灵活且易于维护。 - 如果涉及敏感数据传输，则需谨慎设置 `allowedOrigins` 参数，避免因开放过多权限而引发安全风险。 ```python print("以上为针对若依框架前后端分离时的跨域问题解决方案") ```