• Multiple CORS header ‘Access-Control-Allow-Origin‘ not allowed


    今天在修改天天生鲜超市项目的时候,因为使用了前后端分离模式,前端通过网关统一转发请求到后端服务,但是第一次使用就遇到了问题,比如跨域问题:

    但是,其实网关里是有配置跨域的,只是忘了把前端项目的IP和端口号添加到设置里

    1. server:
    2. port: 9091
    3. servlet:
    4. context-path: /
    5. spring:
    6. profiles:
    7. active: dev
    8. cloud:
    9. gateway:
    10. enabled: true
    11. # 开启自动路由
    12. discovery:
    13. locator:
    14. enabled: true
    15. routes:
    16. # fresheveryday
    17. - id: gateway-fresheveryday
    18. uri: lb://fresheveryday
    19. predicates:
    20. - Path=/api/fresheveryday/**
    21. filters:
    22. - StripPrefix=2
    23. httpclient:
    24. connect-timeout: 1000 # 配置连接超时
    25. response-timeout: 5s # 配置响应超时
    26. # 跨域配置
    27. globalcors:
    28. add-to-simple-url-handler-mapping: true
    29. cors-configurations:
    30. '[/**]': #拦截的请求
    31. maxAge: 36000 #跨域检测的有效期,单位s
    32. allowedOrigins: #允许跨域的请求
    33. - "http://localhost:8080" # mhxysy
    34. - "http://localhost:8081" # layui
    35. - "http://localhost:8099" # authority
    36. allowedMethods: #允许跨域的请求方式
    37. - "GET"
    38. - "POST"
    39. allowedHeaders: "*" #允许请求中携带的头信息
    40. allowedCredentials: true #是否允许携带cookie
    41. logging:
    42. level:
    43. springfox: error
    44. cn.edu.sgu.www.gateway: debug

    如上所示,allowedOrigins里设置的是之前使用网关的服务,在nacos控制台修改gateway-dev.yml

    添加超市前端项目ttsx的访问地址

    1. server:
    2. port: 9091
    3. spring:
    4. application:
    5. name: gateway
    6. cloud:
    7. # 网关配置
    8. gateway:
    9. enabled: true
    10. # 开启自动路由
    11. discovery:
    12. locator:
    13. enabled: true
    14. routes:
    15. # authority
    16. - id: gateway-authority
    17. uri: lb://authority
    18. predicates:
    19. - Path=/api/authority/**
    20. filters:
    21. - StripPrefix=2
    22. # mhxysy
    23. - id: gateway-mhxysy
    24. uri: lb://mhxysy
    25. predicates:
    26. - Path=/api/mhxysy/**
    27. filters:
    28. - StripPrefix=2
    29. # layui
    30. - id: gateway-layui
    31. uri: lb://layui
    32. predicates:
    33. - Path=/api/layui/**
    34. filters:
    35. - StripPrefix=2
    36. # fresheveryday
    37. - id: gateway-fresheveryday
    38. uri: lb://fresheveryday
    39. predicates:
    40. - Path=/api/fresheveryday/**
    41. filters:
    42. - StripPrefix=2
    43. httpclient:
    44. connect-timeout: 1000 # 配置连接超时
    45. response-timeout: 5s # 配置响应超时
    46. # 跨域配置
    47. globalcors:
    48. add-to-simple-url-handler-mapping: true
    49. cors-configurations:
    50. '[/**]': #拦截的请求
    51. maxAge: 36000 #跨域检测的有效期,单位s
    52. allowedOrigins: #允许跨域的请求
    53. - "http://localhost:8080" # mhxysy
    54. - "http://localhost:8081" # layui
    55. - "http://localhost:8088" # ttsx
    56. - "http://localhost:8099" # authority
    57. allowedMethods: #允许跨域的请求方式
    58. - "GET"
    59. - "POST"
    60. allowedHeaders: "*" #允许请求中携带的头信息
    61. allowedCredentials: true #是否允许携带cookie
    62. logging:
    63. file:
    64. name: D:/log/gateway.log
    65. level:
    66. springfox: error
    67. cn.edu.sgu.www.gateway: debug

    添加完之后,重启网关服务gateway,然后再次点登录按钮,还是报错了~

    两次请求其实都正常返回响应数据了,状态码为200,这次的错误原因

    Multiple CORS header 'Access-Control-Allow-Origin' not allowed

    点击右边的问号,原因找到了,服务端返回了两个Access-Control-Allow-Origin响应头,因为网关配置了跨域,后台系统也配置了跨域,所以是gateway和fresheverday的响应头一起返回给了前端。

    遇到这个问题应该怎么解决呢?

    不要慌,有文档,gateway不是给我们提供了很多过滤器工厂吗,打开官网看一下。

    因为博主用的springcloud版本为2.2.6.RELEASE,所以在Spring官网打开的spring cloud gateway的文档页面地址对应的版本处改成2.2.6.RELEASE。

    https://docs.spring.io/spring-cloud-gateway/docs/2.2.6.RELEASE/reference/html/#the-deduperesponseheader-gatewayfilter-factory

    然后看一下全局过滤器工厂,找到响应头相关的过滤器,如图,很快就找到一个

    右边红框内的英文大概意思是会删除两个请求头Access-Control-Allow-CredentialsAccess-Control-Allow-Origin重复的值,一旦网关的cors和下游的cors策略都添加了它们。

    看到这句英语原话,不由嘴角微动,就是它了,不费吹灰之力。

    于是在网关的配置加上上面的配置

    1. # fresheveryday
    2. - id: gateway-fresheveryday
    3. uri: lb://fresheveryday
    4. predicates:
    5. - Path=/api/fresheveryday/**
    6. filters:
    7. - StripPrefix=2
    8. - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin

    重启一下网关服务gateway,点击登录成功跳转到了首页,问题完美解决~

    好了,文章就分享到这里了~

  • 相关阅读:
    vue2.深入响应式原理
    android adb工具命令大全
    【教学类-36-10】20230908方脸爷爷和圆脸奶奶(midjounery-niji)(中班:《我爱我家》数:连线、涂色)
    第一章 - 第4节-计算机软件系统 - 课后习题
    C# 通用 HTTP 签名组件的另类实现
    卷积神经网络loss不下降,神经网络loss多少算正常
    在Word、WPS中插入AxMath公式导致行间距异常的解决办法
    Java常见设计模式
    【kafka】-分区-消费端负载均衡
    SSM+图书馆电子文件资源管理 毕业设计-附源码191614
  • 原文地址:https://blog.csdn.net/heyl163_/article/details/133508686