跨域问题:不允许有多个 'Access-Control-Allow-Origin' CORS 头
跨域 问题 多个 access 允许 Control x27
2023-06-13 09:11:14 时间
好久没有更新了,记录一个小问题
“问题描述:
已拦截跨源请求:同源策略禁止读取位于 http://localhost:9015/standard-service/standard/add 的远程资源。(原因:不允许有多个 'Access-Control-Allow-Origin' CORS 头)。
”
直接请求出现时上述问题,不允许多个 'Access-Control-Allow-Origin' CORS 头
出现,当时的跨域配置包含多处。
背景
解决方案项目后端使用了多个服务模块,对外通过 gateway 网关进行暴露以及请求的分发;前端在请求的时候直接请求网关接口,然后网关将请求分发到独立模块中去。
在此请求过程中,因为搬运了之前的一个模块,而后在前端请求时出现了上述问题。其中涉及到的跨域配置如下。
请求过程
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
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
问题现象
解决方案
问题: 如上,出现了重复配置的问题,当去除掉子模块中的 allowedOrigins
会403forbidden问题。
解决方案: 不需要通过两个模块都进行跨域的配置,可仅在 gateway
网关模块进行设计即可;从而避免重复配置产生的问题。
相关文章
- 包含本地图片请点击word转存怎么解决_为什么会出现跨域问题
- vue07登陆注册--跨域请求问题+ base64编码+axios使用+面试题【v-bind和v-modul和{{}}的区别】
- axios 跨域问题_为什么会出现跨域问题
- axios发送cookie_js跨域设置cookie
- vue-cli3-项目出现跨域解决方法
- 哼哼,谁敢问我CORS跨域,我直接一套操作拿捏!
- Vue3.0商店后台管理系统项目实战-vue3.0跨域问题的解决
- nginx前端跨域_nginx实现跨域
- Ajax 如何解决跨域问题
- 解决css引用字体跨域问题
- 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案详解编程语言
- 解决MySQL跨域访问挑战(mysql跨域)
- 基于Redis的SSO跨域认证实践(sso Redis跨域)
- 跨域单点登录技术利用Redis提升安全性(单点登录跨域redis)
- PHP关于IE下的iframe跨域导致session丢失问题解决方法
- 用jQuery与JSONP轻松解决跨域访问的问题
- ThinkPHP框架实现session跨域问题的解决方法
- jquery解决客户端跨域访问问题