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 脚本可以访问响应数据
如果该请求是跨域请求，浏览器会拦截响应数据，不让 js 访问这些数据

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

3.跨域处理方案

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

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

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

如果是简单请求，则浏览器直接发送。
如果是复杂请求，则浏览器先发送一个预检请求，即 OPTIONS 请求，问一句："我可以发送一个超级复杂的跨域请求吗？"，服务器需要返回针对 OPTIONS 的响应。如果服务器允许发送这个复杂请求，浏览器才会真正发送请求。

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

3.1代理服务器

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

请求处理过程：

前端发送请求，请求经过 nginx，请求被转发到后端服务器。
服务器返回原始响应，原始响应经过 nginx，nginx 自动添加 Access-Control-Allow-Origin: * 响应头，响应返回给前端，js 可以访问响应数据。

# nginx.conf
server {listen 63342;# 前端页面的域名或ipserver_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 {@Overridepublic 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 {@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();config.addAllowedOriginPattern("*"); // 放行所有域名，生产环境请对此进行修改config.setAllowCredentials(true); // 是否发送cookieconfig.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;}
}