java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > SpringBoot跨域处理

一文盘点SpringBoot中常用跨域处理方案

作者：ningqw

跨域是浏览器为了保障安全而遵循的一种规则,是同源策略的一部分,本文将为大家整理了SpringBoot中常用跨域处理的方法,需要的小伙伴可以了解下

1.什么是跨域

跨域是浏览器为了保障安全而遵循的一种规则，是同源策略的一部分。

跨域（Cross-Origin）是浏览器独有的安全策略，不存在于安卓、iOS、Node.js、Python、Java 等原生客户端或服务器端环境中。因为浏览器是一个开放的、执行不可信代码，也就是各个网站的 js 脚本的环境，同源策略是为了保证用户的信息安全。

所以，如果平时测试接口用的是 postman 发送请求，不需要关心跨域问题，但是如果是前后端联调就必须处理跨域问题。

2.浏览器处理跨域请求的方式

浏览器遵循同源策略，不允许页面获取跨域请求返回的响应结果。

比如：当前网页是 http://127.0.0.1:63342，然后向服务器 http://127.0.0.1:8080 发送 GET 请求获取数据。整个过程分成三步：

无论是跨域请求还是非跨域请求，浏览器都可以发送给服务器，并且接收服务器返回的响应数据。

其实浏览器可以向不同的域名发送请求，但是浏览器会拦截响应内容，不让 js 访问，无论请求是否成功。

3.跨域处理方案

跨域处理的核心：让浏览器不要拦截跨域请求返回的数据。

服务器的响应中如果有 Access-Control-Allow-Origin: * 这个响应头，就是告诉浏览器："我是服务器，虽然我跟这个网页不是同源的，但是我允许这个网页跟我通信，我们之间的通信是安全的"，浏览器就不会拦截 js 对响应数据的访问。

浏览器发送的请求可以分为简单请求和复杂请求：

常见的跨域处理方案有：代理服务器、后端服务器跨域配置。

3.1代理服务器

浏览器将请求发送到跟页面同源的代理服务器，代理服务器再将请求转发到目标服务器。因为服务器间通信不受同源策略限制。比如常见的用 nginx 作为代理服务器。

请求处理过程：

# nginx.conf
server {
    listen 63342;
    # 前端页面的域名或ip
    server_name 127.0.0.1;

    # 代理所有以 /api/ 开头的请求到后端服务器
    location /api/ {
        # 后端服务器地址
        proxy_pass http://127.0.0.1:8080/; 

        # 修改请求头，确保后端能收到正确的原始主机信息
        proxy_set_header Host $host; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        proxy_set_header X-Forwarded-Proto $scheme;

        # 添加CORS响应头，允许所有来源的请求，生产环境应关闭
        add_header 'Access-Control-Allow-Origin' '*'; 
        
        # 允许的请求方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, PATCH';
        
        if ($request_method = 'OPTIONS') {
            # 对于OPTIONS请求，直接返回204状态码，不需要转发到后端
            return 204;
        }
    }
}

3.2 后端跨域配置

3.2.1 配置 CORS

配置全局 CORS 规则，在所有响应头都配置可以跨域访问。

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 WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许所有接口跨域
                .allowCredentials(true) // 允许浏览器在跨域请求中发送认证信息
                .allowedOriginPatterns("*") // 允许访问资源的源(协议、域名、端口)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的方法
                .allowedHeaders("*") // 允许的请求头
                .exposedHeaders("*"); // 哪些响应头可以暴露给前端js
    }
}

3.2.2 提供 CorsFilter

提供一个 CorsFilter 的 Bean 作为过滤器。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsFilter {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();

        config.addAllowedOriginPattern("*"); // 放行所有域名，生产环境请对此进行修改

        config.setAllowCredentials(true); // 是否发送cookie

        config.addAllowedMethod("*");  // 放行的请求方式

        config.addAllowedHeader("*"); // 放行的请求头

        config.addExposedHeader("*"); // 暴露头部信息

        // UrlBasedCorsConfigurationSource: 可以为不同的URL路径设置不同的CORS规则
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        // 所有的URL路径都使用同一个CORS规则
        corsConfigurationSource.registerCorsConfiguration("/**", config);

        return new CorsFilter(corsConfigurationSource);
    }
}

3.2.3 @CrossOrigin 注解

在接口类上或者接口方法上添加 @CrossOrigin 注解，表示整个类、单个接口的响应不会被拦截。

@RestController
@CrossOrigin
public class DemoController {

    @PutMapping("/put")
    public Integer put(MultipartFile file) {
        System.out.println(file.getOriginalFilename());
        return 200;
    }

    @GetMapping("/get")
    public Integer get() {
        return 200;
    }
}

到此这篇关于一文盘点SpringBoot中常用跨域处理方案的文章就介绍到这了,更多相关SpringBoot跨域处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文