解决前后端跨域问题（包会的！）

2025/5/2 6:39:36 来源：https://blog.csdn.net/lj20020302/article/details/143337706 浏览: 次关键词：解决前后端跨域问题（包会的！）

文章目录

一、定义
二、跨域流程
三、解决方案
四、代码实现
六、遇见Bug解决
五、总结

一、定义

*跨域*指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

*同源策略：*是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

跨域示例：
在这里插入图片描述

二、跨域流程

在这里插入图片描述

三、解决方案

解决跨域（一）：使用nginx部署为同一域

在这里插入图片描述

解决跨域（二）：配置当次请求允许跨域

添加响应头：

Access-Control-Allow-Origin：支持哪些来源的请求跨域
Access-Control-Allow-Methods：支持哪些方法跨域
Access-Control-Allow-Credentials：跨域请求默认不包含cookie，设置为true可以包含cookie
Access-Control-Expose-Headers：跨域请求暴露的字段

  CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Medified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

Access-Control-Max-Age：表明该相应的有效时间为多少秒。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效

四、代码实现

微服务项目在GateWay服务里新建一个配置类。如不是微服务结构，则放在新建config包下

@Configuration
public class MallCorsConfiguration {@Beanpublic CorsWebFilter corsWebFilter(){UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();//接受任何域名的请求corsConfiguration.addAllowedOrigin("*");//接受任何头部corsConfiguration.addAllowedHeader("*");//这行代码允许客户端使用任何HTTP方法（如GET、POST、PUT、DELETE等）进行跨域请求corsConfiguration.addAllowedMethod("*");//这行代码允许跨域请求携带凭证信息，如Cookies和HTTP认证信息(当allowCredentials设置为true时，allowedOrigins不能包含"*")corsConfiguration.setAllowCredentials(true);// 所有路径都拦截source.registerCorsConfiguration("/**",corsConfiguration);return new CorsWebFilter(source);}
}