SpringBoot之跨域过滤器配置允许跨域访问方式

SpringBoot跨域过滤器配置允许跨域访问

跨域请求

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

问题背景

如果前端提示”Access-Control-Allow-Origin”问题

XMLHttpRequest cannot load http://xxxxxxxxxx/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

跨域过滤器

那么需要再SpringBoot2配置跨域过滤器允许跨域访问。

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
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 IOException, ServletException {  
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT, GET");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
        chain.doFilter(req, res);  
    }  
    @Override
    public void init(FilterConfig filterConfig) {}  
    @Override
    public void destroy() {}  
}  

跨域功能改进

如果需要显示跨域地址，还可以在里面加上访问来源打印语句，供排查

String curOrigin = request.getHeader("Origin");
System.out.println("###跨域过滤器->当前访问来源->"+curOrigin+"###");  

如果需要跨域权限，可以判断一下来源

String curOrigin = request.getHeader("Origin");
System.out.println("###跨域过滤器->当前访问来源->"+curOrigin+"###");  
if(curOrigin.indexOf("127.0.0.1:8080")>-1){
    response.setHeader("Access-Control-Allow-Origin", "*");
}

关于跨域访问更专业的内容，可以访问Mozilla官方的一个关于CROS文章

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

SpringBoot跨域设置（CORS）

一、什么是跨域

请求url的协议、域名、端口三者有任意一个不同即为跨域。跨域问题是因为浏览器的同源策略的限制而产生的。

• 同源：请求url的协议、域名、端口三者都相同即为同源（同一个域）。
• 同源策略：同源策略（Sameoriginpolicy）是一种约定，他是浏览器最核心也最基本的安全功能。同源策略会阻止非同源（同一个域）的内容进行交互。

同源策略的限制：

• 无法读取非同源网页的Cookie、LocalStorage和IndexedDB
• 无法接触非同源网页的DOM
• 无法向非同源地址发送AJAX请求

浏览器的同源策略会限制跨域请求，限制的方式一般有两种：

• 浏览器限制发起跨域请求；
• 跨域请求可以正常发起，但是返回的结果被浏览器拦截了。

一般浏览器都是第二种方式限制跨域请求，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操作，但是返回的结果被浏览器拦截了，那么我们就获取不到返回结果，这是一次失败的请求，但是可能对数据库里的数据产生了影响。

为了防止这种情况的发生，规范要求，对这种可能对服务器数据产生副作用的HTTP请求方法，浏览器必须先使用OPTIONS方法发起一个预检请求，从而获知服务器是否允许该跨域请求：如果允许，就发送带数据的真实请求；如果不允许，则阻止发送带数据的真实请求。

二、跨域资源共享（CORS）

解决非同源内容无法交互的问题，目前主流的解决方案就是：CORS（跨域资源共享）。

跨域资源共享（Cross-origin Resource Sharing）简称CORS，它突破了一个请求在浏览器发出只能在同源的情况下向服务器获取数据的限制。

CORS约定服务器端和浏览器在HTTP协议之上，通过一些额外HTTP头部信息，进行跨域资源共享的协商。服务器端和浏览器都必需遵循规范中的要求。

CORS把HTTP的跨域请求分成两类，简单请求和非简单请求，不同请求按照不同的策略进行跨域资源共享协商。

1. 简单请求

简单跨域请求需满足的条件：

1.请求方法是GET、HEAD或者POST（POST时，Content-Type的值必须是application/x-www-form-urlencoded、multipart/form-data、text/plain中的一个值）；

2.请求中没有自定义HTTP请求头。

HTTP头只能时下面这些字段：

• Accept
• Accept-Language
• Content-Language
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width
• Content-Type

以上两点都满足才是简单跨域请求。

对于简单跨域请求，处理方式如下：

1.浏览器要做的就是在HTTP请求头中添加Origin，将JavaScript脚本所在域填充进去，向其他域的服务器请求资源。

Origin: http://www.joker.com

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

2.服务器端收到一个简单跨域请求后，根据资源权限配置，在响应头中添加Access-Control-Allow-Origin。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。 但这个响应头信息没有包含Access-Control-Allow-Origin字段，浏览器就知道该域名不在许可范围内。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段：

Access-Control-Allow-Origin: http://www.joker.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: My-Token

• Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*值，表示接受任意域名的请求。
• Access-Control-Allow-Credentials: 该字段是可选的。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
• Access-Control-Expose-Headers：该字段是可选的。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

3.浏览器收到响应后，通过获取响应头中的Access-Control-Allow-Origin字段，来判断如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

2. 非简单请求

非简单跨域请求需满足的条件：

• 除GET、HEAD和POST（Content-Type的值是：application/x-www-form-urlencoded、multipart/form-data、text/plain中的一个值）以外的其他HTTP方法
• 如：PUT、DELETE、TRACE、PATCH、POST（Content-Type的值是：application/json）。
• 请求中有自定义HTTP头部。

以上两点只要至少满足其中一点就是非简单跨域请求。

对于非简单跨域请求，处理方式如下：

1.浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问。

真实请求的信息在OPTIONS请求中通过请求头中的Access-Control-Request-Method和Access-Control-Request-Headers字段来描述。此外与简单跨域请求一样，请求头中也会有Origin字段。

Origin: http://www.joker.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Header1,Header2

• Origin：必须字段，用于指定请求源。
• Access-Control-Request-Method：必须字段，用于描述真实请求的方法（PUT、DELETE等）。
• Access-Control-Request-Headers：指定真实请求会额外发送的请求头字段信息。

2.服务器端接到预检请求后，会检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段，检验是否允许跨源请求。

如果不允许该跨域请求，会返回一个正常的HTTP回应，但这个响应头信息没有包含Access-Control-Allow-Origin字段，浏览器就知道该域名不在许可范围内。

如果允许该跨域请求，就会在响应头中放入Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以在响应头中放入Access-Control-Max-Age，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。

Access-Control-Allow-Origin: http://www.joker.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Header1,Header2,Header3
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

• Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
• Access-Control-Allow-Headers：如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
• Access-Control-Allow-Credentials： 该字段与简单请求时的含义相同。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
• Access-Control-Max-Age： 该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。这个过程对真实请求的调用者来说是透明的。

三、SpringBoot设置CORS

SpringBoot设置CORS的的本质都是通过设置响应头信息来告诉前端该请求是否支持跨域。

SpringBoot设置CORS的方式主要有以下三种。

1. 配置过滤器CorsFilter

@Configuration
public class CorsConfig {
    
    @Bean
    CorsFilter corsFilter() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("*"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("
  @AliasFor("origins")
  String[] value() default {};
  @AliasFor("value")
  String[] origins() default {};
  
  String[] originPatterns() default {};
  
  String[] allowedHeaders() default {};
  
  String[] exposedHeaders() default {};
  
  RequestMethod[] methods() default {};
  
  String allowCredentials() default "";
  
  long maxAge() default -1;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。