vue 请求spring boot 跨域请求解决方法----不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头

最新推荐文章于 2024-06-02 01:33:36 发布
最新推荐文章于 2024-06-02 01:33:36 发布
阅读量1.2k 收藏
点赞数
分类专栏： 前端 vue  文章标签： spring boot vue 跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchmyhua88/article/details/114317439
版权
前端 同时被 2 个专栏收录
45 篇文章 1 订阅
订阅专栏
vue 
21 篇文章 0 订阅
订阅专栏

 在前端vue里面，我们调用spring boot接口的时候，会出现跨域错误，如下图所示：

 

跨域解决方案有很多种网上都能找到，但是一不小心多个解决方案一起使用了，也会出现问题，浏览器里面出现多个Access-Control-Allow-Origin就得注意下，是不是解决方案用多了，我这个问题出现的原因是：

1.代码上用了过滤器解决跨域

 

2.NGINX里面用也配置了Access-Control-Allow-Origin: *


 

 

 如果只选看的话，可以看到浏览器里面出现多个Access-Control-Allow-Origin,所以以上策略选择一种即可以正常访问！

华大哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······
一键难忘的博客
04-12 1888
这个报错提示是因为在跨域请求中，请求头中设置了 withCredentials 参数为 true，表示跨域请求需要使用凭证（如 cookies、HTTP 认证等）。而在响应头中，Access-Control-Allow-Origin 的值不能是通配符 *，必须是具体的域名。另外，如果你在发送跨域请求时需要携带 cookies 或其他凭证，还需要在请求头中设置 withCredentials 参数为 true。如果需要全局配置跨域支持，应该使用上一条回答中提到的方式，在配置类中设置。
已拦截跨源请求：（原因：不允许有多个 ‘Access-Control-Allow-Origin’ CORS 头）。
做棵大树
12-28 3502
原文地址：做棵大树 问题描述： 已拦截跨源请求：同源策略禁止读取位于 http://localhost:9015/standard-service/standard/add 的远程资源。（原因：不允许有多个 'Access-Control-Allow-Origin' CORS 头）。 直接请求出现时上述问题，不允许多个 'Access-Control-Allow-Origin' CORS 头 出现，当时的跨域配置包含多处。 背景 解决方案项目后端使用了多个服务模块，对外通过 gateway 网关进行暴露
使用Access-Control-Allow-Origin解决跨域
weixin_30875157的博客
02-05 2438
什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.google.com)，那么我们就可以认为它们是相同的域（协议，域名，端口都必须相同）。 跨域就指着协议，域名，端口不一致，出于安全考虑，跨域的资源之间是无法交互的(例如一般情况跨域的JavaScript无法交互，当然有很多解决跨域的方案) Access-Control-Allow-Or...
【CORS策略： Multiple CORS header ‘Access-Control-Allow-Origin‘ not allowed导致的跨域问题】
阿牛哥的博客
06-01 1399
引起跨域CORS报错的原因有很多种！！！！！这里我的报错属于最后一条。
Vue跨域问题 Access-Control-Allow-Origin
weixin_43184119的博客
06-03 2644
Vue报跨域问题：Access to XMLHttpRequest at ‘http://localhost:8085/queryAll’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 跨域： 我们常见的网址一般包括协议, 域名, 端口几个部分, 在浏览器的同源策
Cors跨域(三)：Access-Control-Allow-Origin多域名？
热门推荐
架构师：通透，才能写出好代码！
06-21 2万+
响应头设置不合理，公司安全部门会请你喝茶
BUG记录——跨域请求错误 CORS    头缺少  Access-Control-Allow-Origin
weixin_44105802的博客
06-08 1263
CROS 头缺少 'Access-Control-Allow-Origin'
Vue-cli3+Springboot解决跨域的问题
weixin_51043896的博客
08-11 480
在使用Vue+Springboot框架，前后端分离时，我们会遇到跨域的问题，也就是当你前端发送请求的时候，会报错： Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 当在网页的控制台...
vue axios 解决跨域问题CORS
07-08
对于后端服务器（如Node.js、Spring Boot等），我们需要在响应头中添加`Access-Control-Allow-Origin`字段，指定允许跨域的源。例如，如果是Node.js的Express应用，可以这样做： ```javascript app.use(function...
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
10-17
综上所述，解决Vue+Spring Boot跨域和Session失效问题的关键在于配置CORS策略以允许携带Cookie的跨域请求，并确保Session配置正确。同时，考虑采用Token认证机制，如JWT，以实现更灵活的认证和授权管理。
跨域拦截Access-Control-Allow-Origin设置多个origin
小道仙的后宫
10-21 3802
目的：java跨域请求设置多个ip 不知道怎么解决跨域的先看 https://blog.csdn.net/Tomwildboar/article/details/82901514 现在遇到了一个问题，就是多个 ip 都要访问我这接口。 网上看到了一个方法https://www.cnblogs.com/Java-Starter/p/7603313.html String origin...
spring cloud解决双重跨域报错The ‘Access-Control-Allow-Origin‘ header contains multiple values , but only one
爱米酱的博客
08-03 967
这是因为Vue的后端gateway做了一次跨域设置，而vue的前端又向其他的后台服务也发请求，如果其他的后端服务如果也做了跨域设置就会导致重复跨域问题。
VUE3 解决跨域问题 Access-Control-Allow-Origin_vue access-control-allow-origin
m0_60721860的博客
04-08 117
【代码】VUE3 解决跨域问题 Access-Control-Allow-Origin_vue access-control-allow-origin。
跨域请求解决方法----不允许有多个 ‘Access-Control-Allow-Origin‘ CORS 头
最新发布
weixin_65287123的博客
06-02 696
但是后端启动后，前端报错'Access-Control-Allow-Origin' CORS 多个头。如上代码：注解重复配置跨域。
Java中设置多个Access-Control-Allow-Origin跨域访问
个人博客
07-11 1万+
1、如果服务端是Java开发的，添加如下设置允许跨域即可，但是这样做是允许所有域名都可以访问，不够安全。 response.setHeader("Access-Control-Allow-Origin","*"); 2、为保证安全性，可以只添加部分域名允许访问，添加位置可以在下面三处任选一个。 （1）可以在过滤器的filter的dofilter()方法种设置。 （2）可以在servlet...
已被CORS策略阻止：请求的资源上不存在“Access Control Allow Origin”标头
m0_48926849的博客
07-12 2283
springboot版本不同跨域配置不同
SpringBoot添加Cors跨域配置，解决No Access-Control-Allow-Origin header is present on the requested resource
weixin_44953227的博客
07-31 3945
本期目录什么是CORSSpringBoot 全局配置CORS拦截器处理预检请求 什么是CORS 跨域(CORS)请求：同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指 “协议+域名+端口” 三者相同， 不同源则跨域。 如果还想了解更多，下面这两个文档更加详细的介绍了CORS CORS 参考链接：https://developer.mo
Spring boot 遇到前端报错Access-Control-Allow-Origin 跨域问题
sjian1990的博客
10-25 1万+
前端报错 Access-Control-Allow-Origin 的前端问题解决： 在spring boot 服务中心添加一个配置文件： import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegis
双重跨域：Access-Allow-Origin header contains multiple values“*, *”,but only one is allowed
生蛋的公鸡的博客
06-21 1104
spring cloud gateway 多重跨域
Vue3 axios解决跨域问题，报错Access-Control-Allow-Origin
09-05
Vue3中解决跨域问题，报错Access-Control-Allow-Origin的方法如下： 1. 在项目的config.js文件中添加以下配置： ```javascript proxy: { '/api': { target: 'http://localhost:8081', // 后端服务器的地址 changeOrigin: true, // 是否跨域 ws: true, // 是否代理 websockets secure: true, // 是否https接口 pathRewrite: { '^/api': '' // 路径重置 } } } ``` 这样配置后，所有以`/api`开头的请求都会被代理到后端服务器。 2. 在Vue文件中编写请求： ```javascript created() { axios.get('api/user/findUserAll').then(function (resp) { console.log(resp) }) } ``` 这样就可以使用axios发送跨域请求了，不再报错Access-Control-Allow-Origin。 需要注意的是，axios本质上是JavaScript的ajax封装，因此会受到同源策略的限制。为了解决跨域问题，我们使用代理方式将请求转发到后端服务器。同时，确保后端服务器已经配置了正确的跨域响应头，例如设置Access-Control-Allow-Origin为允许访问的域名。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue3解决跨域问题，报错Access-Control-Allow-Origin](https://blog.csdn.net/weixin_45425813/article/details/123911222)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue中axios实现数据交互与跨域问题](https://download.csdn.net/download/weixin_38745361/14902123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值