已拦截跨源请求:(原因:不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头)。

学习心得 做棵大树 2年前 (2021-12-19) 920次浏览 0个评论

问题描述:

已拦截跨源请求:同源策略禁止读取位于 http://localhost:9015/standard-service/standard/add 的远程资源。(原因:不允许有多个 'Access-Control-Allow-Origin' CORS 头)。

直接请求出现时上述问题,不允许多个 'Access-Control-Allow-Origin' CORS 头 出现,当时的跨域配置包含多处。

背景

解决方案项目后端使用了多个服务模块,对外通过 gateway 网关进行暴露以及请求的分发;前端在请求的时候直接请求网关接口,然后网关将请求分发到独立模块中去。

在此请求过程中,因为搬运了之前的一个模块,而后在前端请求时出现了上述问题。其中涉及到的跨域配置如下。

已拦截跨源请求:(原因:不允许有多个 'Access-Control-Allow-Origin' CORS 头)。

  1. gateway 网关配置文件

    spring:
    cloud:
           # 微服务网关
           gateway:
             discovery:
               locator:
                 enabled: true                 # 开启从注册中心动态创建路由的功能,利用微服务名进行路由
                 lower-case-service-id: true   # 微服务名称以小写形式呈现
    
             globalcors:
               cors-configurations: 
                 # 全局允许访问
                 '[/**]':
                   allow-credentials: true
                   allowed-origins:
                     - http://localhost:8080
                     - http://standard.beatree.cn
                   allowed-headers: "*"
                   allowed-methods:
                     - OPTIONS
                     - GET
                     - POST
                     - PUT
                     - DELETE
  2. service 功能模块全局跨域配置

    CorsConfig.java

    //@Configuration
    public class CorsConfig implements WebMvcConfigurer {
    
       @Autowired
       CorsParams corsParams;
    
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins(corsParams.getAllowedOrigins())
                   .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                   .allowCredentials(true)
                   .maxAge(3600)
                   .allowedHeaders("*");
       }
    }
    /**
    *  corsParams.getAllowedOrigins() 
    */

    application.yml

    cros:
     allowedOrigins:
       - http://api.beatree.cn
       - http://localhost:8080

    已拦截跨源请求:(原因:不允许有多个 'Access-Control-Allow-Origin' CORS 头)。

解决方案

问题: 如上,出现了重复配置的问题,当去除掉子模块中的 allowedOrigins 会 403forbidden 问题。

解决方案: 不需要通过两个模块都进行跨域的配置,可仅在 gateway 网关模块进行设计即可;从而避免重复配置产生的问题。


做棵大树 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明已拦截跨源请求:(原因:不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头)。
喜欢 (0)
[欢迎投币]
分享 (0)
关于作者:
一个整天无所事事的,有时候忽然热血的孩子
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址