当前位置：首页 > article >正文

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

article 2025/1/20 2:01:44

文章目录

一、定义
二、跨域流程
三、解决方案
四、代码实现
六、遇见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 {

    @Bean
    public 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);
    }
}