跨域-告别CORS烦恼

跨域-告别CORS烦恼

文章目录

• 跨域-告别CORS烦恼
• • @[toc]
  • 1-参考网址
  • 2-思路整理
  • • 1-核心问题
    • 2-个人思考
    • 3-脑洞打开
    • 4-个人思考-修正版
    • • 1-个人思考
      • 2-脑洞打开
  • 3-知识整理
  • • 1-什么是跨域
    • • 一、同源策略简介
      • • 什么是源
        • 什么是同源
        • 是否是同源的判断
        • 哪些操作不受同源策略限制
        • 跨域
        • 如何跨域
      • 二、CORS 简介
      • • 1、简单请求
        • 2、非简单请求
      • 三、Spring Boot 配置 CORS
      • • 1、使用`@CrossOrigin` 注解实现
        • 2、原理剖析
    • 2-Java如何配置CORS
    • • 1. 使用`@CrossOrigin`注解
      • 2. 全局配置CORS
      • 3. 使用Filter实现CORS
      • 4. 使用拦截器（Interceptor）
      • 5.响应体（Response Body）来设置CORS
      • 6.通过**自定义`ResponseBodyAdvice`**

1-参考网址

• Cors解决跨域请求问题
• SpringBoot3跨域方案详解

---

2-思路整理

1-核心问题

• 1）什么是跨域-为什么要搞一个跨域
• 2）简单请求/非简单请求
• 3）理论上如何解决跨域问题
• 4）Java如何解决跨域问题

2-个人思考

• 1）为什么有CORS跨域->最简单的解释：前端和后端最好是部署在同一个服务器上，前后端之间使用内网IP进行访问，避免后端的API接口被其他网站访问（同源策略）
• 2）但我们为什么没有这样做->多种原因：①前后端分离架构 ②后端多实例容灾 ③等等其他元素 ->前后端分析引发现象：前端必须使用IP或者域名进行访问后端
• 3）又引发运维上的问题->后端的IP或者域名会变，但是前端又不能总是更换后端IP或者域名->一劳永逸的解决方案：后端直接全部放开API的接口调用
• 4）域名不校验岂不是要翻天->解决方案：①前后端鉴权使用API-KEY或者其他鉴权措施 ②公有云的防御服务
• 5）那为什么我本地开发可以访问很多网站的API接口->因为开发人员没有注意这些情况，或者网站本身就是对外提供API访问的网站

3-脑洞打开

• 1）开发侧-如果我做静态个人网站，我如何进行跨域限制（防止网站被恶意攻击）
• 2）开发侧-如果我做SDK服务型网站，我如何进行跨域限制（防止网站被恶意攻击）
• 3）爬虫侧-如和避免网站的API接口被爬取，如何定义自己的robots.txt

---

4-个人思考-修正版

你的理解总体上是正确的，但有一些地方可以进一步完善和修正：

1-个人思考

1. 为什么有CORS跨域

   • 最简单的解释
     ：前端和后端最好是部署在同一个服务器上，前后端之间使用内网IP进行访问，避免后端的API接口被其他网站访问（同源策略）。这个说法基本正确，但同源策略不仅是为了避免后端API被其他网站访问，更是为了保护用户的数据安全，防止恶意网站通过用户浏览器窃取敏感信息。
   • 同源策略：浏览器的同源策略限制了一个文档或脚本从一个源访问另一个源的资源，除非满足同源条件（协议、域名、端口都相同）。这是浏览器提供的一种安全机制，用于防止恶意网站读取其他网站的敏感数据。

2. 但我们为什么没有这样做

   • 多种原因：
     • 前后端分离架构：现代Web开发中，前后端分离架构很常见，前端负责展示和交互，后端负责数据处理和业务逻辑，两者通常部署在不同的服务器上。
     • 后端多实例容灾：为了提高系统的可用性和可靠性，后端可能有多个实例部署在不同的服务器或数据中心，前端需要访问不同的后端实例。
     • 其他元素：比如微服务架构，不同的服务可能部署在不同的服务器上，前端需要调用多个服务的API。
   • 前后端分析引发现象：前端必须使用IP或者域名进行访问后端。这个说法不完全准确，前端可以通过多种方式访问后端，比如通过域名、IP、负载均衡器等。

3. 又引发运维上的问题

   • 后端的IP或者域名会变：确实，在实际运维中，后端的IP或者域名可能会因为各种原因发生变化，比如服务器迁移、负载均衡器调整等。
   • 但是前端又不能总是更换后端IP或者域名：这个说法正确，频繁更换前端配置不现实，也不方便。
   • 一劳永逸的解决方案：后端直接全部放开API的接口调用。这个解决方案不安全，不能简单地全部放开，否则会导致安全风险，比如跨站请求伪造（CSRF）攻击、恶意爬虫等。

4. 域名不校验岂不是要翻天

   • 解决方案：
     • 前后端鉴权使用API-KEY或者其他鉴措施权：正确，通过API-KEY、OAuth、JWT等方式进行鉴权，可以确保只有授权的请求才能访问后端API。
     • 公有云的防御服务：正确，公有云平台提供了一系列的安全服务，比如防火墙、DDoS防护、WAF（Web应用防火墙）等，可以有效防止恶意攻击。

5. 那为什么我本地开发可以访问很多网站的API接口

   • 因为开发人员没有注意这些情况：这个说法不完全准确，很多网站的API是对外提供服务的，允许其他网站或开发者调用但，通常会有一些限制，比如需要注册、申请API密钥等。
   • 或者网站本身就是对外提供API访问的网站：正确，比如一些开放平台，如微博、微信等，它们的API就是对外提供服务的，供开发者集成到自己的应用中。

2-脑洞打开

1. 开发侧-如果我做静态个人网站，我如何进行跨域限制（防止网站被恶意攻击）

   • 跨域限制：可以通过设置CORS（跨域资源共享）策略来限制哪些网站可以访问你的API。例如，在服务器配置中，只允许特定的域名访问你的API。
   • 防止恶意攻击：除了CORS，还可以采取其他安全措施，比如使用防火墙、限制请求频率、使用验证码等。

2. 开发侧-如果我做SDK服务型网站，我如何进行跨域限制（防止网站被恶意攻击）

   • 跨域限制：同样可以通过CORS策略来限制访问，还可以要求调用方提供API密钥或其他身份验证信息。
   • 防止恶意攻击：可以对请求进行签名验证，确保请求的合法性；还可以对请求进行限流，防止恶意爬虫或攻击导致服务器过载。

3. 爬虫侧-如和避免网站的API接口被爬取，如何定义自己的robots.txt

   • 避免被爬取：可以通过技术手段，比如限制请求频率、验证请求来源、使用验证码等，来防止恶意爬虫。
   • 定义robots.txt：robots.txt文件是网站根目录下的一个文本文件，用于告诉搜索引擎和其他爬虫哪些页面可以爬取，哪些不可以爬取。例如：

     User-agent: *
     Disallow: /api/ #  禁止爬虫访问API接口
     Allow: /public/  # 允许爬虫访问公开的资源
     

     但要注意，robots.txt只是一种君子协议，恶意爬虫可能会忽略它，所以还需要其他安全措施来保护API接口。

---

3-知识整理

1-什么是跨域

一、同源策略简介

同源策略（same origin policy）是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略是浏览器安全的基石。

什么是源

源（origin）就是协议、域名和端口号。例如：http://www.baidu.com:80这个URL。

什么是同源

若地址里面的协议、域名和端口号均相同则属于同源。

是否是同源的判断

例如判断下面的URL是否与 http://www.a.com/test/index.html 同源

• http://www.a.com/dir/page.html 同源
• http://www.child.a.com/test/index.html 不同源，域名不相同
• https://www.a.com/test/index.html 不同源，协议不相同
• http://www.a.com:8080/test/index.html 不同源，端口号不相同

哪些操作不受同源策略限制

1. 页面中的链接，重定向以及表单提交是不会受到同源策略限制的；
2. 跨域资源的引入是可以的。但是JS不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域

受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象就需要跨域。 在同源策略的限制下，非同源的网站之间不能发送 AJAX 请求。

如何跨域

• 降域

  可以通过设置 document.domain='a.com'，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置document.domain='a.com' 。

• JSONP跨域

• CORS 跨域

二、CORS 简介

为了解决浏览器同源问题，W3C 提出了跨源资源共享，即 CORS(Cross-Origin Resource Sharing)。

CORS 做到了如下两点：

• 不破坏即有规则
• 服务器实现了 CORS 接口，就可以跨源通信

基于这两点，CORS 将请求分为两类：简单请求和非简单请求。

1、简单请求

在CORS出现前，发送HTTP请求时在头信息中不能包含任何自定义字段，且 HTTP 头信息不超过以下几个字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type 只限于 [application/x-www-form-urlencoded 、multipart/form-data、text/plain ] 类型

一个简单的请求例子：

GET /test HTTP/1.1Accept: */*Accept-Encoding: gzip, deflate, sdch, brOrigin: http://www.examples.comHost: www.examples.com

对于简单请求，CORS的策略是请求时在请求头中增加一个Origin字段，服务器收到请求后，根据该字段判断是否允许该请求访问。

1. 如果允许，则在 HTTP 头信息中添加 Access-Control-Allow-Origin 字段，并返回正确的结果 ；
2. 如果不允许，则不在 HTTP 头信息中添加 Access-Control-Allow-Origin 字段 。

除了上面提到的 Access-Control-Allow-Origin ，还有几个字段用于描述 CORS 返回结果 ：

1. Access-Control-Allow-Credentials： 可选，用户是否可以发送、处理 cookie；
2. Access-Control-Expose-Headers：可选，可以让用户拿到的字段。有几个字段无论设置与否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type
   、Expires、Last-Modified、Pragma 。

2、非简单请求

对于非简单请求的跨源请求，浏览器会在真实请求发出前，增加一次OPTION请求，称为预检请求（preflight request）。预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到 HTTP
头信息字段中，询问服务器是否允许这样的操作。

例如一个DELETE请求：

OPTIONS /test HTTP/1.1Origin: http://www.examples.comAccess-Control-Request-Method: DELETEAccess-Control-Request-Headers: X-Custom-HeaderHost: www.examples.com

与 CORS 相关的字段有：

1. 请求使用的 HTTP 方法 Access-Control-Request-Method ；
2. 请求中包含的自定义头字段 Access-Control-Request-Headers 。

服务器收到请求时，需要分别对 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 进行验证，验证通过后，会在返回 HTTP 头信息中添加 ：

Access-Control-Allow-Origin: http://www.examples.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

他们的含义分别是：

1. Access-Control-Allow-Methods: 真实请求允许的方法
2. Access-Control-Allow-Headers: 服务器允许使用的字段
3. Access-Control-Allow-Credentials: 是否允许用户发送、处理 cookie
4. Access-Control-Max-Age: 预检请求的有效期，单位为秒。有效期内，不会重复发送预检请求

当预检请求通过后，浏览器会发送真实请求到服务器。这就实现了跨源请求。

三、Spring Boot 配置 CORS

1、使用@CrossOrigin 注解实现

如果想要对某一接口配置 CORS，可以在方法上添加 @CrossOrigin 注解 ：

@CrossOrigin(origins = {"http://localhost:9000", "null"})
@RequestMapping(value = "/test", method = RequestMethod.GET)
public String greetings(){return"{\"project\":\"just a test\"}";
}

如果想对一系列接口添加 CORS 配置，可以在类上添加注解，对该类声明所有接口都有效：

@CrossOrigin(origins = {"http://localhost:9000", "null"})
@RestController
@SpringBootApplication
public class SpringBootCorsTestApplication {
}

如果想添加全局配置，则需要添加一个配置类 ：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE").maxAge(3600).allowCredentials(true);}
}

另外，还可以通过添加 Filter 的方式，配置 CORS 规则，并手动指定对哪些接口有效。

@Bean
public FilterRegistrationBean corsFilter(){UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();CorsConfiguration config=new CorsConfiguration();config.setAllowCredentials(true);config.addAllowedOrigin("http://localhost:9000");config.addAllowedOrigin("null");config.addAllowedHeader("*");config.addAllowedMethod("*");source.registerCorsConfiguration("/**",config); // CORS 配置对所有接口都有效FilterRegistrationBean bean=new FilterRegistrationBean(new CorsFilter(source));bean.setOrder(0);return bean;}

2、原理剖析

无论是通过哪种方式配置 CORS，其实都是在构造 CorsConfiguration。一个 CORS 配置用一个 CorsConfiguration类来表示，它的定义如下：

public class CorsConfiguration {private List<String> allowedOrigins;private List<String> allowedMethods;private List<String> allowedHeaders;private List<String> exposedHeaders;private Boolean allowCredentials;private Long maxAge;
}

Spring 中对 CORS 规则的校验，都是通过委托给 DefaultCorsProcessor 实现的。

DefaultCorsProcessor 处理过程如下：

1. 判断依据是 Header 中是否包含 Origin。如果包含则说明为 CORS请求，转到 2；否则，说明不是 CORS 请求，不作任何处理。
2. 判断 response 的 Header 是否已经包含 Access-Control-Allow-Origin，如果包含，证明已经被处理过了, 转到 3，否则不再处理。
3. 判断是否同源，如果是则转交给负责该请求的类处理。
4. 是否配置了 CORS 规则，如果没有配置，且是预检请求，则拒绝该请求，如果没有配置，且不是预检请求，则交给负责该请求的类处理。如果配置了，则对该请求进行校验。

校验就是根据 CorsConfiguration 这个类的配置进行判断：

1. 判断 origin 是否合法
2. 判断 method 是否合法
3. 判断 header是否合法
4. 如果全部合法，则在 response header中添加响应的字段，并交给负责该请求的类处理，如果不合法，则拒绝该请求。

---

2-Java如何配置CORS

在Spring Boot
3中，解决跨域请求（CORS，Cross-Origin
Resource Sharing）的问题主要有以下几种方式：

1. 使用@CrossOrigin注解

你可以直接在Controller类或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "*")
public class UserController {}

在这个例子中，@CrossOrigin
注解被添加到了控制器类上，表示这个控制器下的所有方法都允许来自http://example.com的GET和POST请求。你也可以将注解添加到特定的方法上，以对该方法应用CORS配置。

2. 全局配置CORS

如果你希望全局配置CORS，而不是在每个Controller或方法上单独配置，你可以创建一个配置类来实现WebMvcConfigurer接口，并重写addCorsMappings方法。

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 CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE").allowedHeaders("*").allowCredentials(true).maxAge(168000);}
}

在这个配置中，addMapping("/**")表示对所有的路径都应用CORS配置。allowedOrigins("*")
表示允许所有来源的访问，这在生产环境中可能不是最佳实践，通常你会指定具体的域名。allowedMethods定义了允许的HTTP方法，allowedHeaders
定义了允许的HTTP头部，allowCredentials(true)表示是否允许携带凭证（cookies, HTTP认证及客户端SSL证明等），maxAge则用于设置预检请求的有效期。

3. 使用Filter实现CORS

你也可以通过实现Filter接口来自定义CORS处理逻辑。

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class SimpleCorsFilter implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", "http://example.com");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "x-requested-with");chain.doFilter(req, res);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}}

然后需要在配置类中注册这个Filter。

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class FilterConfig {@Beanpublic FilterRegistrationBean<SimpleCorsFilter> corsFilter() {FilterRegistrationBean<SimpleCorsFilter> registrationBean = new FilterRegistrationBean<>();registrationBean.setFilter(new SimpleCorsFilter());registrationBean.addUrlPatterns("/*");return registrationBean;}}

4. 使用拦截器（Interceptor）

如果需要更复杂的CORS逻辑，你可以创建一个拦截器来处理CORS请求。拦截器允许你在请求处理之前或之后添加逻辑。

import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class CorsInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {response.setHeader("Access-Control-Allow-Origin", "http://example.com");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.setHeader("Access-Control-Allow-Headers", "*");return true;}
}

然后，你需要在配置类中注册这个拦截器：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {@Autowiredprivate CorsInterceptor corsInterceptor;@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(corsInterceptor).addPathPatterns("/**");}}

• 当设置allowedHeaders("*")时，实际上浏览器会发送实际请求头而不是*。出于安全考虑，最好明确指定允许的头部。
• 在生产环境中，确保不要过于宽松地配置CORS，只允许必要的源和方法。
• 如果你的应用部署在代理服务器后面（如Nginx或Apache），可能还需要在代理服务器上配置CORS。

5.响应体（Response Body）来设置CORS

虽然这种方式不如前面提到的几种方法直接和常用，但在某些特殊场景下，你可能需要手动控制响应头来实现跨域。

具体实现时，你可以在Controller的方法中，通过HttpServletResponse对象来设置Access-Control-Allow-Origin等CORS相关的HTTP头。

import javax.servlet.http.HttpServletResponse;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class MyController {@GetMapping("/data")public String getData(HttpServletResponse response) {response.setHeader("Access-Control-Allow-Origin", "http://example.com");response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.setHeader("Access-Control-Allow-Headers", "*");response.setHeader("Access-Control-Max-Age", "3600");return "Data";}}

需要注意的是，手动设置响应头的方式相对繁琐，且容易遗漏某些必要的头信息，导致CORS配置不完整。因此，在实际开发中，推荐使用前面提到的方法，它们更为直接且易于管理。

此外，如果你正在使用Spring Security，还需要确保Spring Security的配置不会阻止跨域请求的处理。在某些情况下，你可能需要在Spring Security的配置中允许特定的CORS请求。

6.通过自定义ResponseBodyAdvice

ResponseBodyAdvice是Spring MVC提供的一个接口，允许你在Controller方法返回响应体之前对其进行修改。虽然它本身不是专为CORS设计的，但你可以利用它在返回响应之前添加CORS相关的HTTP头。

下面是一个简单的示例，展示了如何通过实现ResponseBodyAdvice接口来添加CORS头：

import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;import java.lang.reflect.Type;public class CorsResponseBodyAdvice implements ResponseBodyAdvice<Object> {@Overridepublic boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {return true;}@Overridepublic Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedContentType,Class<? extends HttpMessageConverter<?>> selectedConverterType,ServerHttpRequest request, ServerHttpResponse response) {response.getHeaders().set("Access-Control-Allow-Origin", "http://example.com");response.getHeaders().set("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");response.getHeaders().set("Access-Control-Allow-Headers", "*");return body;}
}

然后，你需要在Spring Boot的配置中注册这个ResponseBodyAdvice：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void configureMessageConverters(List<HttpMessageConverter<?>> converters) {converters.forEach(converter -> {if (converter instanceof MappingJackson2HttpMessageConverter) {((MappingJackson2HttpMessageConverter) converter).setResponseBodyAdvice(new CorsResponseBodyAdvice());}});}}

这种方法的优点在于它可以全局地应用于所有Controller的响应，而无需在每个Controller或方法上单独设置。然而，它同样也有一些局限性，比如你可能需要手动处理一些CORS的细节，并且这种方式不如使用Spring提供的CORS支持那么直接和灵活。

在选择解决方案时，应该根据项目的具体需求和团队的偏好来权衡各种方法的优缺点。如果项目中有大量的Controller需要处理跨域请求，并且希望有一个统一且全局的解决方案，那么使用WebMvcConfigurer或CorsFilter
可能是更好的选择。如果只需要在特定的Controller或方法上处理跨域请求，那么使用@CrossOrigin注解可能更为简单直接。

---