【问题解决篇】前后端分离项目跨域问题:Access to XMLHttpRequest at ‘xx‘ from origin ‘xx‘ has been blocked by CORS policy

最新推荐文章于 2025-05-21 13:30:00 发布
最新推荐文章于 2025-05-21 13:30:00 发布
阅读量917 收藏 4
点赞数 8
CC 4.0 BY-SA版权
分类专栏： Java开发 文章标签： intellij-idea java ide 经验分享 spring boot spring cloud
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panda_aaa/article/details/140476983

目录

文章目录

1. 跨域报错页面

2. 报错原因

3. 常用解决方法

3.1 方法一 使用配置类实现跨域过滤器

3.2 方法二  JSONP方式解决跨域

文章目录

1. 跨域报错页面

浏览器按下F12可以在控制台看见类似：

Access to XMLHttpRequest at 'http://xxxx' from origin 'http://xxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. 报错原因

原因是：

基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

例如：

最低0.47元/天 解锁文章
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
qq_44021627的博客
08-02 1670
这是由于所有使用JavaScript的浏览器都会支持同源策略。只要有一个不同，就会当作跨域请求。此时还有浏览器同源策略的保护，是防止不同源（域、协议或端口）的网页之间进行恶意操作。所以综上，前端后端处在不同的域时就会报该错误。在一些前后端不同源的项目中，前端向后端发起请求时，有时候无法正常向后端请求到服务，F12查看控制台会发现报错。然后找到请求页面，在axios的请求接口里面只写。然后找到请求页面，在axios的请求接口里面只写。如果使用vue-cli脚手架创建的项目,找到。举个例子，如果请求接口为。
Access to XMLHttpRequest at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS policy:
Dove的博客
10-29 4083
Access to XMLHttpRequest at 'http://xxx' from origin 'http://xxx'has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 出现这个问题是axios的跨域问题。 既然不能直接访问，那么我们就可以设置代理。服务器之间请求数据，是没有跨域的。就可以配置一个代理服务器请求另一个服务器中
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
weixin_59997843的博客
03-13 2853
提供了简洁的注解驱动方式解决跨域问题，适用于快速开发场景。对于企业级应用，建议通过全局配置统一管理跨域规则，兼顾安全性和可维护性。通过合理配置来源、方法和头信息，既能保障接口的开放性，又能有效防范潜在的安全风险。最近，华为云与硅基流动联合推出了一款强大的 AI 模型——满血版 DeepSeek R1。这款模型不仅性能强大，更重要的是，注册即送 2000 万 Token！对于开发者、研究人员和 AI 爱好者来说，这无疑是一个巨大的福利。那么，2000 万 Token 到底是什么概念？点击这里注册。
【Vue】Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy（Axios）
HEX9CF的技术博客
09-25 5737
基于Vue3和SpringBoot进行前后端分离开发，实现登录功能。在测试提交表单时axios报错。
Access to fetch at*from origin*has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
最新发布
2301_77640853的博客
05-21 500
本文介绍了解决跨域资源共享（CORS）问题的几种方法。首先，推荐在后端配置CORS，提供了Java和Python的示例代码，展示了如何允许所有来源、请求头和方法的跨域请求。其次，对于开发环境，可以临时禁用浏览器的CORS检查，具体操作包括在Chrome、Edge和Firefox中添加启动参数。此外，前端可以通过配置代理（如Vite）来避免跨域问题。最后，文章提醒开发者注意处理非简单请求和自定义请求头的情况，并指出根本解决方法是正确配置后端的CORS。
【跨域问题解决】Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS
aaaa_aaab的博客
08-26 1324
这个错误是由于浏览器的同源策略（CORS, Cross-Origin Resource Sharing）导致的。当从一个源（origin）向另一个源请求资源时，如果这两个源的协议、域名或端口号不同，就会触发CORS策略。解决方法要解决这个问题，你需要在你的后端服务中添加CORS支持，以便它允许来自你的请求。这通常涉及到在你的后端服务器中添加适当的响应头（Headers）。
Access to XMLHttpRequest at ‘http://xxxx‘ from origin ‘http://xxxx‘ has been blocked by CORS policy
热门推荐
笑三年-Dylen
10-30 11万+
解决CORS跨域问题 今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-A
控制台报错Access to XMLHttpRequest at ‘http://‘ from origin ‘http://‘ has been blocked by CORS policy
lph159的博客
03-21 9656
期初我是在写前端代码进行调试，其中用到了axios，打开控制台一直在报上面的错误，以为是跨域的问题，所以一直针对跨域问题进行调试，但是还是解决不了，后来发现我的前端代码有些小错误，axios的method后面是没有s的（我写成了methods），修正之后还是解决不了。在解决跨域问题的时候引入了一些其他依赖，我把依赖去除，问题解决了...绷不住了啊。依赖添加多了会出问题，我针对跨域去解决问题的时候，添加了如下依赖，导致控制台出错。axios的method不带s，所以一定要细心。这个问题，纠缠了我很久。
Access to XMLHttpRequest at ‘xx‘ from origin ‘xx‘ has been blocked by CORS policy
xiao_sa_ge的博客
03-22 2188
Access to XMLHttpRequest at '接口地址和参数' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.可能是接口报错。
Ajax跨域请求时出现Access to XMLHttpRequest at ‘xxx‘ from origin ‘xxx‘ has been been blocked by CORS policy
qq_56769991的博客
03-23 6273
1.在做前后端分离的项目时，会遇到跨域问题，如下图所示： 2.这里可以看到，出现了跨域问题，首先我们先看看跨域问题是怎么产生的： 这是由于浏览器同源策略的限制。 所谓同源是指：协议、域名、端口三者都要相同，即使两个不同的域名指向同一个IP地址，也是非同源。 一句话总结：只要请求的资源URL的协议、域名、端口号三者任意一个与当前页面的不同就会出现跨域问题。 同源策略是一种约定，用于保障浏览器最基本最核心的安全问题，若是缺少同源策略浏览器的正常功能可能都会受到影响。试想一下，如果没有同源（同协议、同域名、同端
Vue | Access to XMLHttpRequest at BBB from origin AAA has been blocked by CORS policy.
狂放不羁霸的博客
03-19 1142
一、回顾（可跳过） 二、后续（可跳过） 三、解决跨域问题 3.1 问题翻译 3.2 问题分析 3.3 问题解决
Access to XMLHttpRequest at ‘http:xxx‘ from origin ‘null‘ has been blocked by CORS policy: No ‘Acces
Saehun1994的博客
07-02 2028
具体来说，错误中提到的“Access to XMLHttpRequest at 'http:xxx' from origin 'null' has been blocked by CORS policy”意味着从“null”这个源（通常是因为你的代码是在本地文件系统中直接打开而不是通过服务器运行的）向“http:xxx”这个地址发送请求时被CORS策略阻止了。头部，你可以将其设置为你的前端服务器的URL（如果你希望只允许来自该URL的请求）或。（允许来自任何源的请求，但出于安全考虑，通常不推荐）。
Access to XMLHttpRequest at ‘http://xx‘ from origin ‘http://xx‘ has been blocked by CORS policy:
记录知识、锤炼自我
09-30 6万+
问题场景 错误信息： Access to XMLHttpRequest at 'http://localhost:9090' from origin 'http://localhost:9090' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 翻译：【在http://localhost:9090对http://localhos
网页端报错Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origi
qq_51553762的博客
12-13 4240
Tomcat需要在MyEclipse中重新部署。可能的原因是Tomcat被占用
Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been been blocked by CORS policy
lo_olo_ol的博客
12-27 1103
前端出现Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been been blocked by CORS policy错误 解决方法 在SpringBoot后台接口上加上 @CrossOrigin 例如 import com.example.demo.bean.Admin; import com.example.demo.servi...
Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: No 'Access-Cont
09-26 8409
出现这个就说明有发生跨域请求了 假设项目是在本地的8003端口 但是调用了8006的接口，那么就会出现跨域了 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $.ajax({ url: 'http://127.0.0.1:...
前端学习（2442）：解决跨域问题
歌谣的博客
10-20 1623
1.同源策略如下： URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名，不同端口 不允许 http:
Access to XMLHttpRequest at ‘域名1 ‘ from origin ‘域名2‘ has been blocked by CORS java跨域问题详细解决方案
qq_36255346的博客
06-17 7285
Access to XMLHttpRequest at ‘域名1 ‘ from origin ‘域名2‘ 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.
Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access contr
01-20
CORS（跨域资源共享）是一种浏览器安全机制，用于限制跨域请求。当你在浏览器中发送跨域请求时，如果服务器没有正确配置CORS，浏览器会阻止该请求，并显示"Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy"的错误信息。 这个错误通常是由于服务器没有正确设置响应头中的Access-Control-Allow-Origin字段导致的。该字段用于指定允许访问该资源的域名。如果服务器没有设置该字段，或者设置的值与请求的origin不匹配，浏览器就会阻止该请求。 解决这个问题的方法有几种： 1. 在服务器端设置响应头中的Access-Control-Allow-Origin字段，将其设置为允许访问的域名。例如，如果你的请求是从"http://localhost:4444"发起的，你可以将该字段设置为"http://localhost:4444"。 2. 如果你无法修改服务器端的配置，你可以尝试使用代理服务器来转发请求。通过在同一域名下设置代理服务器，可以避免跨域请求的问题。 3. 另一种解决方法是使用JSONP（JSON with Padding）来进行跨域请求。JSONP利用了<script>标签不受同源策略限制的特性，通过动态创建<script>标签来获取跨域数据。 请注意，以上方法的适用性取决于你的具体情况和需求。你需要根据实际情况选择最适合的解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值