跨域问题解决方案（三种）

A尘埃

已于 2024-02-01 15:13:35 修改

阅读量1.4k

点赞数

文章标签：跨域解决方案

于 2023-09-15 08:33:57 首次发布

本文链接：https://blog.csdn.net/usa_washington/article/details/132889038

版权

Same Origin Policy同源策略（SOP）

具有相同的Origin，也即是拥有相同的协议、主机地址以及端口。一旦这三项数据中有一项不同，那么该资源就将被认为是从不同的Origin得来的，进而不被允许访问。

Cross-origin resource sharing跨域资源共享（CORS）

是一个W3C标准。允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。它的通信过程，都是浏览器自动完成，不需要用户参与。

对于开发者来说，CORS通信与同源的AJAX/Fetch通信没有差别，代码完全一样。
浏览器一旦发现请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求：只要在头信息增加一个Origin字段。是HEAD、GET、POST请求，并且HTTP的头信息不超出以下几种字段 Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。反之，就是非简单请求。
非简单请求：在正式通信之前，增加一次OPTIONS查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

实现CORS很简单，就是在服务端加一些响应头，并且这样做对前端来说是无感知的
在这里插入图片描述

如果在开发中，发现每次发起请求都是两条，一次OPTIONS，一次正常请求，注意是每次，那么就需要配置Access-Control-Max-Age，避免每次都发出预检请求。

跨域可以从以下方面解决

应用层解决：例如SpringBoot项目中
反向代理解决：Nginx
网关中解决：Spring Cloud Gateway中解决

方法一SpringBoot中解决

使用@CrossOrigin注解实现局域类跨域
通过配置文件实现全局跨域
通过CorsFilter对象实现全局跨域
通过Response对象实现居于方法跨域
通过实现ResponseBodyAdvice实现全局跨域

①、@CrossOrigin注解的方式

注解可以放在method、class等上面，类似RequestMapping，也就是说，整个controller下面的方法可以都受控制，也可以单个方法受控制
当修饰类时，表示此类中的所有接口都可以跨域；当修饰方法时，表示此方法可以跨域

@RestController
@CrossOrigin(origins = "*")
public class TestController{
	
	@RequestMapping("/test")
	public HashMap<String,Object> test(){
		
		return new HashMap<String,Object>(){
			{
				put("state", 200);
            	put("data", "success");
            	put("msg", "");
			}
		}; 
	}
}

此方式虽然虽然实现（跨域）比较简单，但细心的朋友也能发现，使用此方式只能实现局部跨域，当一个项目中存在多个类的话，使用此方式就会比较麻烦（需要给所有类上都添加此注解）

②、通过配置文件跨域

（很多旧版的WebMvcConfigurerAdapter被标记为过时Deprecated）

@Configuration
public class CorsConfig implements WebMvcConfigurer{
	
	@Override
	public void addCorsMappings(CorsRegistry registry){
		
		registry.addMapping("/**")// 所有接口
			.allowedOrigins("*")//支持域
			.allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")//支持方法
			.allowCredentials(true)// 是否发送 Cookie
			.maxAge(3600)
			.allowedHeaders("*");
	}
}

③、通过CorsFilter跨域

此实现方式和上一种实现方式类似，它也可以实现全局跨域

@Configuration
public class MyCorsFilter{
	
	@Bean
	public CorsFilter corsFilter(){
		
		// 1.创建 CORS 配置对象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOriginPattern("*");
        // 是否发送 Cookie
        config.setAllowCredentials(true);
        // 支持请求方式
        config.addAllowedMethod("*");
        // 允许的原始请求头部信息
        config.addAllowedHeader("*");
        // 暴露的头部信息
        config.addExposedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 对象
        return new CorsFilter(corsConfigurationSource);
	}
}

④、通过Response跨域

此方式是解决跨域问题最原始的方式，但它可以支持任意的 Spring Boot 版本（早期的 Spring Boot 版本也是支持的）。但此方式也是局部跨域，它应用的范围最小，设置的是方法级别的跨域

@RestController
public class TestController{
	
	@RequestMapping("/test")
	public HashMap<String,Object> test(HttpServletResponse response){
		
		//设置跨域
		response.setHeader("Access-Control-Allow-Origin","*");
		return new HashMap<String, Object>() {{
            put("state", 200);
            put("data", "success");
            put("msg", "");
        }};
	}
}

⑤、通过ResponseBodyAdice跨域

通过重写 ResponseBodyAdvice 接口中的 beforeBodyWrite（返回之前重写）方法，可以对所有的接口进行跨域设置
此实现方式也是全局跨域，它对整个项目中的所有接口有效。

@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice{
	
	/**
     * 内容是否需要重写（通过此方法可以选择性部分控制器和方法进行重写）
     * 返回 true 表示重写
     */
	@Override
	public boolean suooprts(MethodParameter returnType, Class converterType){
		return true;
	}

	/**
     * 方法返回之前调用此方法
     */
    @Override
    public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,
                                  Class selectedConverterType, ServerHttpRequest request,
                                  ServerHttpResponse response) {
        // 设置跨域
        response.getHeaders().set("Access-Control-Allow-Origin", "*");
        return body;
    }
}

⑥、基于过滤器方式，在response中写入这些响应头。

@WebFilter(filterName = "CorsFilter")
@Configuration
public class CorsFilter implements Filter{
	
	@Override
	public void doFilter(ServletRequest req,ServletResponse res,FilterChain chain) throws IOException, ServletException {
	
		HttpServletResponse response = (HttpServletResponse)res;
		response.setHeader("Access-Control-Allow-Origin","*");
		response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
	}
}

方法二 Nginx 中解决跨域

在 Nginx 服务器的配置文件中添加以下代码：

server {
    listen       80;
    server_name  your_domain.com;
    location /api { # 针对 /api 路径的请求进行跨域设置
    
        # 允许跨域请求的域名，* 表示允许所有域名访问
        add_header 'Access-Control-Allow-Origin' '*';

        # 允许跨域请求的方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        # 允许跨域请求的自定义 Header
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept';

        # 允许跨域请求的 Credential，用于指定是否允许跨域请求发送和接收 Cookie
        add_header 'Access-Control-Allow-Credentials' 'true';

        # 预检请求的存活时间，即 Options 请求的响应缓存时间
        add_header 'Access-Control-Max-Age' 3600;

        # 处理预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
    # 其他配置...
}

方法三网关中解决跨域

Spring Cloud Gateway 中解决跨域问题可以通过以下两种方式实现：

①、通过在配置文件中配置跨域实现

在 application.yml 或 application.properties 中添加以下配置：

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]': # 这里的'/**'表示对所有路由生效，可以根据需要调整为特定路径
            allowedOrigins: "*" # 允许所有的源地址，也可以指定具体的域名
            allowedMethods: # 允许的 HTTP 方法类型
              - GET
              - POST
              - PUT
              - DELETE
              - OPTIONS
            allowedHeaders: "*" # 允许所有的请求头，也可以指定具体的请求头
            allowCredentials: true # 是否允许携带凭证（cookies）
            maxAge: 3600 # CORS预检请求的有效期（秒）

通过这样的配置，Spring Cloud Gateway 网关将自动处理所有经过它的跨域请求，并添加相应的响应头，从而允许前端应用执行跨域请求

②、通过在框架中添加 CorsWebFilter 来解决跨域问题

在 Spring-Framework 从 5.3 版本之前，使用以下代码可以让 Spring Cloud Gateway 网关允许跨域：

@Configuration
public class GlobalCorsConfig{
	
	@Bean
	public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOrigin("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

而 Spring-Framework 5.3 版本之后，关于 CORS 跨域配置类 CorsConfiguration 中将 addAllowedOrigin 方法名修改为 addAllowedOriginPattern，因此配置了变成了以下这样：

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 这里仅为了说明问题，配置为放行所有域名，生产环境请对此进行修改
        config.addAllowedOriginPattern("*");
        // 放行的请求头
        config.addAllowedHeader("*");
        // 放行的请求类型，有 GET, POST, PUT, DELETE, OPTIONS
        config.addAllowedMethod("*"); 
        // 暴露头部信息
        config.addExposedHeader("*"); 
        // 是否允许发送 Cookie
        config.setAllowCredentials(true); 
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}