【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······

已于 2023-08-07 14:55:19 修改
阅读量2.5k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 永无BUG—报错解决合集 文章标签： vue.js spring bug
于 2023-04-12 19:44:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52908342/article/details/130115085
本文记录了解决Vue3-Element-Admin前后端分离项目中，由于CORS策略导致的跨域错误。问题在于前端请求头withCredentials设为true，而后端响应头Access-Control-Allow-Credentials未正确设置。通过在Spring后端添加@CrossOrigin注解，设置allowCredentials为true，允许所有域名并启用凭据，成功解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一.问题发现

报错内容：

p://localhost:8001/user/login’ from origin ‘http://localhost:3001’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

前后端分离项目：

前端：Vue3-Element-Admin

后端：SpringCloud

后端接口已写好，用postman检测正常。

在这里插入图片描述

但是在搭建好前端项目后，进行数据传输时报错：

了解本专栏 订阅专栏 解锁全文
springboot跨域：Access to XMLHttpRequest at &apos； has been blocked by CORS policy: The value of the &a
qq_40395100的博客
11-12 806
目录 问题描述： springboot跨域解决： 问题描述： AccesstoXMLHttpRequestat'http://'hasbeenblockedbyCORSpolicy: Thevalueofthe'Access-Control-Allow-Origin'headerintheresponsemustnotbethewildcard'*'whentherequest'scredentialsmodeis'incl...
Vue报错has been blocked by CORS policy Response to preflight request doesn‘t pass access controlcheck
m0_67394006的博客
03-06 9692
【已解决–我的是由于vue-cli版本问题，前文太长可以直接跳转到解决方案】 文章目录 服务端跨域解决 Nginx配置跨域（下文的解决方案是开发环境下，部署上线需要在nginx中配置反向代理） 前端的跨域配置 解决方案 网上的一些解决方案 全部的报错信息： Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://l
Access to XMLHttpRequest athas been blocked by CORS policy: The value of the 'Access-Control-Allow-C
飞翔的熊blabla
01-09 2368
Access to XMLHttpRequest athas been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode i...
成功解决 origin ‘http://localhost‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
最新发布
m0_47020683的博客
06-09 511
看报错第二个ip地址，是什么就改成什么，如果没有端口号那就不要加端口号。我其中的.setAllowedOrigins(
跨域问题记录：has been blocked by CORS policy_ The ‘Access-Control-Allow-Origin‘
weixin_45680024的博客
10-13 8819
跨域问题
Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy
第一段代码的博客
04-15 7681
blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致. 解决方案: 1.前端设置代理的方式: 在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域: 详细配置和配置属性解释,见代码注释 devServer: { port: 9999, // open: true, // 设置代理 proxy: { //配置跨域 '/api': { tar
网站跨域解决方案 - Chrome has been blocked by CORS policy: The 'Access-Control-Allow-Origin'
Three_ST的博客
03-24 3494
1.IIS下网站访问跨域 在IIS中找到HTTP请求头，添加 Access-Control-Allow-Origin * 在NGINX下也是添加类似的请求头，可参考以下链接 1.https://blog.csdn.net/weixin_40647516/article/details/102660374 2.直接在项目中添加CORS的依赖： 在startup.cs中...
vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin
海贼王某人的博客
07-31 2008
起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 4438
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header的解决方案
FHlang的博客
04-16 4448
遇到的问题 Access to XMLHttpRequest at ‘http://localhost:8081/order/no’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 翻译：通过CORS策略已阻止从源"http:// localhost:8080"
跨域问题 has been blocked by CORS policy The request client is not a secure context
m0_67393828的博客
03-02 1058
问题描述，前端请求后端接口出现了跨域，get请求是OK 的，POST 请求有问题。请求链路是前端请求接口先到服务端的网关系统，再由网关系统转发到其他业务系统中。 第一步、首先看两个相关的服务是不是没有加跨域的配置。经检查发现两台服务都加了跨域代码，如下： 业务系统解决跨域代码： @Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfiguration() {
Vue跨域问题 has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header
qq_40794785的博客
10-10 12万+
Vue跨域踩的坑 has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 问题再现 axios封装： //为了使用方便自定义了一个request请求方法 export function request(config
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
qq_59833893的博客
10-18 7163
之后又出现 CORS 头缺少 'Access-Control-Allow-Origin' 跨域问题。原因：项目中设置了双跨域配置导致的问题。删除或注解掉一处，只保留一个。注释掉nginx上的相关配置。
跨域问题解决has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple va
CSDN_Admin0的博客
04-26 9311
Access to XMLHttpRequest at 'http://localhost:8222/eduservice/indexfront/index' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. 通过CORS策
[vue报错]has been blocked by CORS policy
weixin_33725270的博客
01-08 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values
weixin_42642782的博客
12-24 5028
跨域问题 前端报错has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values; 原因： 1、配置双重跨域，比如网关做配置之后，其他服务也做了配置。 2、后端配置之后，nginx也做了跨域配置。 3、携带过期TOKEN访问，或者两个ip使用同一个TOKEN访问。 ...
Vue报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access controlcheck
热门推荐
风不知从何处起的小屋
05-15 20万+
全部的报错信息： Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://localhost:8086' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Contro
Vue DEV报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access 跨域问题
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
05-29 625
2.并且把axios里的baseURL改为空，就解决了。1.vite.config.js文件里配置。问题：本地DEV环境运行报错跨域问题。
has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '
johnhuster的专栏
04-11 1万+
背景： 通过zuul做代理，反向代理到对应的controller中，发现之前正常工作的接口突然不能正常工作了，最终通过浏览器调试模式发现 出现了错误提示： has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values ' 原因是服务应用里面有一个Cor...
vue怎么解决has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple value
09-06
在Vue中解决CORS（跨域资源共享）问题，可以使用代理服务器或配置后端服务器的响应头。 1. 代理服务器方法： - 在Vue项目的根目录下创建一个`vue.config.js`文件（如果已存在则直接编辑）。 - 在`vue.config.js`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一键难忘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值