1. 概述
老话说的好：大处着眼，不贪一时之利。太贪心，只会失去更多，知足才能常乐。
言归正传，今天我们来聊聊 如何解决浏览器跨域的问题。
2. 跨域问题
2.1 什么是跨域
跨域，简单说就是访问的页面域名是 www.a.com，而在此页面中 Ajax 请求接口，请求的是 www.b.com 的接口，出于安全考虑，浏览器默认不允许这样做，便会报错，提示跨域。
至于为什么浏览器默认不允许跨域，允许跨域有什么安全隐患，这里就不讨论了，本文只是给大家讲讲在需要跨域的情况下，如何解决跨域问题。
当然，如果访问的页面和页面中请求的接口都在一个域名下，就没有跨域的烦恼了。
解决跨域问题，前端、后端都需要配置，只配置一端是不行的。
2.2 使用 java 代码解决后端跨域
新增一个跨域配置类 CrossDomainConfig，在其中配置允许跨域访问的url、请求方式、Header等。代码如下：
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 CrossDomainConfig{ public CrossDomainConfig() { } private CorsConfiguration buildConfig() { // 添加cors配置信息 CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("http://localhost:8080"); // * 代表所有url corsConfiguration.addAllowedOrigin("*"); // 设置允许请求的方式 corsConfiguration.addAllowedMethod("*"); // 设置允许的header corsConfiguration.addAllowedHeader("*"); // 设置是否发送cookie信息 corsConfiguration.setAllowCredentials(true); return corsConfiguration; } @Bean public CorsFilter corsFilter() { // 为url添加映射路径 UrlBasedCorsConfigurationSource crossDomainSource = new UrlBasedCorsConfigurationSource(); crossDomainSource.registerCorsConfiguration("/**", buildConfig()); // 返回重新定义好的配置 return new CorsFilter(crossDomainSource); } }
2.3 Nginx 解决后端跨域
在后端接口所在的 server 配置中增加如下配置即可。
# 允许跨域请求的域名，*代表所有 add_header 'Access-Control-Allow-Origin' *; # 允许带上cookie请求 add_header 'Access-Control-Allow-Credentials' 'true'; # 允许请求的方法，例如：GET、POST、PUT、DELETE等，*代表所有 add_header 'Access-Control-Allow-Methods' *; # 允许请求的头信息，例如：DNT,X-Mx-ReqToken,Keep-Alive,User-Agent等，*代表所有 add_header 'Access-Control-Allow-Headers' *;
对于后端接口来说，Java代码 和 Nginx，使用其中一种方法解决跨域即可。
2.3 前端 Ajax 解决跨域
只是后端解决跨域，使用 Ajax 默认配置调用接口时，接口可以调通，但 Cookie 无法跨域携带，需要在 Ajax 调用时增加以下配置：
crossDomain:true, //设置跨域为true xhrFields: { withCredentials: true //默认情况下，标准的跨域请求是不会发送cookie的 },
2.4 SameSite 问题
为了防止 CSRF 攻击和用户追踪，一些浏览器的高版本增加并默认开启了 SameSite 的机制，严格控制跨域携带 Cookie。
Microsoft Edge 和 Google Chrome 的高版本就默认开启了 SameSite 机制。
SameSite 简单说，就是浏览器在生成 Cookie 时，增加了 Cookie 的安全级别，跨域携带是不允许的。
解决的方法有两个：
1、登录接口在生成 Cookie 时，修改 Cookie 的 SameSite 配置，例如： httponly; secure;SameSite=None
2、在登录接口反向代理的 Nginx 的 location 配置中增加配置：proxy_cookie_path / "/; httponly; secure;SameSite=None";
注意：将 Cookie 的 SameSite 设置为 None 的前提是，接口访问协议必须是 https 的。
3. 综述
今天聊了一下 如何解决浏览器跨域的问题，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。
4. 个人公众号
追风人聊Java，欢迎大家关注
