后端接口配置跨域访问

### 后端配置CORS实现跨域访问 #### Java后端解决方案 对于Java后端而言，存在两种主要方式来处理CORS问题。其一是通过前端采用JSONP的方式绕过浏览器的安全机制；然而更常用也更为推荐的做法是在服务器端启用CORS支持[^3]。 为了使应用程序能够响应来自不同源的HTTP请求，在Spring框架中可以通过`@CrossOrigin`注解快速开启特定控制器或方法级别的跨域资源共享功能。另外也可以利用过滤器(Filter)全局定义允许哪些客户端可以发起跨域请求： ```java @Bean public FilterRegistrationBean<CorsFilter> corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); // 配置可信任的站点列表 config.setAllowedOrigins(Arrays.asList("http://example.com")); // 允许所有的头信息 config.addAllowedHeader("*"); // 支持GET/POST等请求类型 config.addAllowedMethod("*"); source.registerCorsConfiguration("/api/**", config); FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source)); bean.setOrder(0); // 确保该过滤器优先级最高 return bean; } ``` 此段代码展示了如何创建一个自定义的`CorsFilter`并将其注册到应用上下文中，从而实现了细粒度控制哪些路径下的资源应该被开放给指定来源的网页调用。 #### Nginx反向代理设置 除了直接修改业务逻辑层外，还可以借助Web服务器如Nginx来进行跨域配置。这种方式的好处在于它不会影响实际的服务程序本身，并且可以在不改变现有架构的情况下轻松解决问题[^5]。 以下是针对Nginx的一个典型配置片段用于解决跨域难题: ```nginx location /api/ { proxy_pass http://backend_server; # 添加必要的响应头部以满足CORS需求 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'; if ($request_method = 'OPTIONS') { return 204; } } ``` 上述配置项中的`add_header`指令用来告知浏览器当前服务愿意接受哪个（些）外部网站对其发出AJAX请求的同时携带凭证(cookie/session)，以及具体能执行什么类型的HTTP操作(GET/POST...)和额外传递什么样的HTTP首部字段。 当涉及到带有认证信息(`withCredentials=true`) 的跨站请求时，则需特别注意确保后端正确设置了 `Access-Control-Allow-Credentials` 为 true 并指定了具体的允许起源而不是通配符(*) ，因为后者不允许与前者一同使用[^2]。