SpringBoot 实现跨域请求

本文介绍如何在SpringBoot和Nginx中配置跨域访问,并简要提及浏览器端的跨域设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

跨域访问支持(Spring Boot、Nginx、浏览器)


一、Spring Boot跨域配置

我们的后端使用Spring Boot。Spring Boot跨域非常简单,只需书写以下代码即可。

@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
  }
  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

代码非常简单,不做赘述。该代码在Spring Boot 1.5.4中测试通过。

二、Nginx跨域配置

某天,我们将Spring Boot应用用Nginx反向代理。而前端跨域请求的需求不减,于是乎。

Nginx跨域也比较简单,只需添加以下配置即可。

location / {
	proxy_pass http://localhost:8080;
	if ($request_method = 'OPTIONS') {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
		add_header 'Access-Control-Max-Age' 1728000;
		add_header 'Content-Type' 'text/plain; charset=utf-8';
		add_header 'Content-Length' 0;
		return 204;
	}
	if ($request_method = 'POST') {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
		add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
	}
	if ($request_method = 'GET') {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
		add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
	}
}

其中:add_header 'Access-Control-Expose-Headers' 务必加上你请求时所带的header。例如本例中的“Token”,其实是前端传给后端过来的。如果记不得也没有关系,浏览器的调试器会有详细说明。

参考文档:https://enable-cors.org/server_nginx.html

B.T.W,阿里云中文档描述到Nginx也可通过crossdomain.xml配置文件跨域:https://helpcdn.aliyun.com/knowledge_detail/41123.html ,不过笔者并未采用这种方式。

三、浏览器设置跨域

Chrome、Firefox本身是可以通过配置支持跨域请求的。

:通过浏览器设置实现跨域的玩法,个人没有亲测过。


转载自:http://www.itmuch.com/work/cors/


### Spring Boot 中请求的配置方法 #### 使用过滤器方式全局配置 一种常见的解决问题的方法是通过创建自定义过滤器并将其注册到应用中。这种方式可以为整个应用程序设置统一的策略[^1]。 ```java import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; @Component public class CorsFilter implements Filter { @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); try { chain.doFilter(req, res); } catch(Exception e){ throw new ServletException(e.getMessage()); } } } ``` 上述代码展示了如何通过 `CorsFilter` 类实现支持,其中设置了允许的源 (`*`)、HTTP 方法以及头部字段等内容。 --- #### 利用 WebMvcConfigurer 接口进行配置 另一种常用的方式是通过实现 `WebMvcConfigurer` 接口来完成配置。这种方法更加灵活,适合需要针对特定路径或控制器单独设定规则的情况[^4]。 ```java 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("/api/**") // 对 /api/ 下的所有接口生效 .allowedOrigins("*") // 允许任何名发起请求 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 支持的 HTTP 请求方法 .maxAge(3600) // 预检请求缓存时间(秒) .allowedHeaders("Content-Type", "Authorization"); // 允许携带的 Header 字段 } } ``` 此示例说明了如何利用 `addCorsMappings` 方法指定哪些 URL 模式适用规则,并明确了具体的参数范围。 --- #### 基于注解的局部配置 如果只需要对某些特定的 Controller 或 Method 进行控制,则可以直接使用 `@CrossOrigin` 注解[^2]。 ```java import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/example") @CrossOrigin(origins = "http://localhost:8080", allowedHeaders = "*", methods = {RequestMethod.GET}) public class ExampleController { @GetMapping("/data") public String getData() { return "This is cross-origin data."; } } ``` 这里展示了一个简单的例子,在 `ExampleController` 上添加了 `@CrossOrigin` 注解以限定其仅接受来自 `http://localhost:8080` 的请求。 --- #### 结合配置类导入机制 为了确保配置能够被正确加载,可以通过在主程序入口处加入 `@Import` 注解引入专门负责逻辑的配置文件[^3]。 ```java import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.context.annotation.Import; @SpringBootApplication @Import(CorsConfig.class) public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 这里的 `CorsConfig` 即为之前提到过的某个实现功能的具体配置类实例。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值