Access to XMLHttpRequest at ‘http://127.0.0.1:8080 from origin ‘http://localhost:8080‘ XXXCORS 报错

最新推荐文章于 2025-04-12 12:52:45 发布
最新推荐文章于 2025-04-12 12:52:45 发布
阅读量6k 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： http java spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43249043/article/details/120298966
版权
本文探讨了在本地开发SpringBoot应用时遇到的跨域问题，焦点在于两个不同端口（8080和8081）之间的通信，提供了解决此问题的方法。

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

在这里插入图片描述
问：本地开springboot后台居然会跨域？
答: 两个请求的端口号不一样，一个是8080，一个是8081

在这里插入图片描述

跨域问题：Access to XMLHttpRequest at ‘http://localhost:3001/re‘ from origin ‘http://127.0.0.1:8848‘
qq_38432089的博客
03-19 6389
1、问题描述： 在本地用express构建服务器端，前端访问数据。 报错：Access to XMLHttpRequest at ‘http://localhost:3001/responseData’ from origin ‘http://127.0.0.1:8848’ （一）app.js // 引入express const express = require('express'); // 引入path const path = require('path'); // 实例化express const
Access to XMLHttpRequest at ‘http://localhost/login/hello‘ from origin ‘http://127.0.0.1:5500‘ has b
m0_51346654的博客
06-03 2528
本文章仅用来记录课设所发生的错误，SpingBoot和js速成，因此遇到很多问题，仅具有参考性。 Access to XMLHttpRequest at ‘http://localhost/login/hello’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resourc...
解决跨域：“Access to XMLHttpRequest at ‘http://127.0.0.1:8081‘ from origin ‘http://localhost:8080‘“
qq_48009509的博客
11-29 5万+
在使用 vue 过程中经常会向服务器请求数据，但是时常会发生跨域的错误，具体什么是“跨域”请自行百度，这里说明一下怎么解决这个问题。 1、在 vue.config.js 文件中配置如下操作： 2、在 main.js 中修改baseURL 3、在服务器中配置允许跨域 ...
Access to XMLHttpRequest at ‘http://127.0.0.1:8000/login‘ from origin ‘http://127.0.0.1:5500‘ has b
2401_83381651的博客
04-12 167
Access to XMLHttpRequest at 'http://127.0.0.1:8000/login' from origin 'http://127.0.0.1:5500' 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 reque
Access to XMLHttpRequest at ‘http://127.0.0.1:8080/xxx’ from origin ‘http://192.168.1.103:8096’ has
城南蝈蝈
10-07 3476
但是这个方法明显也不适合我，第一是用的手机APP，用ionic，ionic.config.json当中没有配置代理的情况下访问A和B这两个后台只有B会出现跨域问题，说明不是这个问题。豁然开朗，因为发送请求时，会先发送一个OPTIONS，而这个配置，因为没有登录的原因，禁止使用，而前台的OPTIONS请求没有得到相应，就不能继续发送其他类似GET或者POST请求，这样就会出现跨域问题。而且，前台发生请求时，会发送两次请求，一次是options,options通过后发送get或者post请求。
Access to XMLHttpRequest at ‘http://127.0.0.1:8080/user‘ from origin ‘http://localhost:8080‘ has bee
qq_43337583的博客
11-05 4751
最近在学后端用java写接口， @RequestMapping(value = "/user", method = RequestMethod.GET) public List<User> getUser(){ return userService.findAll(); } 前台再自己调用接口，发现跨域 控制台错误是 Access to XMLHttpRequest at 'http://127.0.0.1:8080/user' from origin 'http://loc
Node_报:index.html:1 Access to XMLHttpRequest at ‘http://127.0.0.1:8080/gets‘ from origin ‘null‘ has
weixin_42137574的博客
09-14 4419
遇到的情况: 我服务器用的是Node js 配合前端Ajax时 报了如上那个错 意思就是跨域问题 解决办法: var server = http.createServer(function(req,res){ res.writeHead(200, { 'Content-Type': 'application/json;charset=utf-8', 'Access-Control-Allow-Credentials': true, .
Vue通过axios跨域问题：Access to XMLHttpRequest at ‘http://127.0.0.1:8000/api/auction/‘ from origin ...
weixin_45859193的博客
06-07 6万+
问题描述： 通过使用Vue向后台发生请求时，被浏览器CORS阻止： 原因分析： 浏览器跨域问题： 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。 解决方案： 1.js通过jsonp实现绕过浏览器通过script进行跨域请求 2.vue中使用axios跨域 1.创建vue.config.js文件如下： module.exports = { devServer: { proxy: { '/api':
Access to XMLHttpRequest at ‘http://localhost:8443/api/logout‘ from origin ‘http://localhost:8080‘
05-07 1751
问题： 解决方案： 后端相关Controller添加跨域注解@CrossOrigin
json-server运行报错Access to XMLHttpRequest at ‘http://localhost:3000/a‘ from origin ‘http://127.0.0.
weixin_61587523的博客
03-13 964
在使用最新版本的json-server时，会出现关于跨域的问题。
Access to XMLHttpRequest at ‘http://xxx‘ from origin ‘http://xxx‘ has been blocked by CORS policy:
Dove的博客
10-29 4063
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的跨域问题。 既然不能直接访问，那么我们就可以设置代理。服务器之间请求数据，是没有跨域的。就可以配置一个代理服务器请求另一个服务器中
解决Ajax跨域问题：Origin http://127.0.0.1:8080 is not allowed by Access-Control-Allow-Origin....
weixin_30729609的博客
03-13 584
在服务端上设置一下header,如response.header("Access-Control-Allow-Origin","*"); 转载于:https://www.cnblogs.com/leehongee/p/3598317.html
Access to XMLHttpRequest at 'http://127.0.0.1:8000/XXXXX' from origin 'http://localhost
weixin_30518397的博客
05-03 2万+
Django 报错，跨域请求出现问题。 在settings.py中添加 #设置可跨域范围 CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True #定义跨域中间件 'corsheaders.middleware.CorsMiddleware', 转载于:https://www.c...
Access to XMLHttpRequest at ‘http://127.0.0.1:8080/XXX‘ from origin ‘null‘ has been blocked问题解决
m0_60525119的博客
03-14 750
当浏览器通过file://协议打开本地HTML文件，或前端与后端域名、端口不一致时，会触发浏览器的同源策略（Same-Origin Policy），导致CORS（跨域资源共享）错误。在方法参数中添加HttpServletResponse对象，设置响应头。在Controller类或方法上添加注解，允许特定域或全部域的访问。
Access to XMLHttpRequest at ‘http://api.ego.com/api/user/check/admin/1‘ from origin ‘http://www.ego.
ly1316221439的博客
02-19 2203
Access to XMLHttpRequest at 'http://api.ego.com/api/user/check/admin/1' from origin 'http://www.ego.com' has been blocked by CORS policy: 问题解决
Access to XMLHttpRequest at ‘http://127.0.0.1:8000/server‘ from origin ‘http://127.0.0.1:5500‘ has
lucky_ferry的博客
10-15 4万+
控制台输出 Access to XMLHttpRequest at 'http://127.0.0.1:8000/server' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested reso 离谱~~我访问本地服务器，竟然还存在跨域问题 找了很对解决方案 最有效的是 在设置响应头时
网页端报错Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origi
qq_51553762的博客
12-13 4197
Tomcat需要在MyEclipse中重新部署。可能的原因是Tomcat被占用
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
热门推荐
一觉睡过头的菜鸡的博客
05-30 8万+
文章目录一、问题二、问题产生的原因三、解决方法1. 问题出现在我们没有带标头，我们就带上标头2. 使用插件扩展 一、问题 当我实现前后端分离的时候，遇到了这个问题： Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre
一个奇怪的跨域问题
qq1261275789的博客
10-07 562
在学习jfinal的时候，遇到一个奇怪的问题 Access to XMLHttpRequest at ‘http://127.0.0.1:8080/izhicheng/login/login’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in prefli
Access to XMLHttpRequest at 'http://127.0.0.1:8080/admins' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
最新发布
05-10
<think>好的，我现在需要帮助用户解决CORS策略阻止XMLHttpRequest跨域请求的问题。用户提到虽然HTTP状态码是OK的，但请求仍然被CORS策略阻止。这可能是因为响应头中缺少必要的CORS头，或者预检请求（preflight request）没有正确处理。 首先，我需要回忆CORS的基本机制。当一个请求是跨域的时候，浏览器会先发送一个预检请求（OPTIONS方法），检查服务器是否允许实际请求的方法和头。如果预检请求失败，浏览器会阻止实际请求，即使状态码是200。因此，用户的问题可能出在预检请求的响应头配置上。 根据引用[1]的内容，问题可能在于响应头缺失或无效。因此，解决方案需要确保服务器在响应预检请求和实际请求时包含正确的CORS头，如Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers。 接下来，我需要分步骤思考解决方案： 1. 检查服务器响应头是否正确配置。特别是Access-Control-Allow-Origin是否明确指定了允许的源，或者设为通配符*（但需要注意安全性）。同时，检查其他必要的头如Access-Control-Allow-Methods是否包含实际请求中使用的方法（如GET、POST等），以及Access-Control-Allow-Headers是否包含自定义或非简单头。 2. 确保预检请求的OPTIONS方法正确处理。服务器需要能够响应OPTIONS请求，并返回正确的CORS头。有时候，服务器配置可能没有显式处理OPTIONS方法，导致预检失败。 3. 如果前端可以接受不透明的响应（无法读取响应内容），可以考虑将请求模式设置为no-cors。但这样会限制前端对响应的处理能力，可能不是最佳解决方案。 4. 另外，检查是否存在其他安全策略或中间件（如防火墙、反向代理）可能修改或拦截了CORS头，导致响应头不完整。 然后，需要将这些步骤转化为用户能够理解和实施的指导。可能需要具体举例，比如在后端代码中添加CORS中间件，或者在服务器配置中设置响应头。例如，使用Node.js的Express框架时，可以通过cors中间件来简化配置。 同时，需要注意用户的开发环境，比如是否使用了某些框架或服务器，不同的后端可能需要不同的配置方法。例如，引用[3]提到DispatcherServlet处理请求，这可能涉及Spring框架的配置，用户可能需要检查Spring Security或CORS过滤器设置。 最后，提醒用户测试和验证的方法，比如使用浏览器开发者工具检查网络请求的响应头，确认CORS头是否正确返回。如果预检请求失败，可以在控制台看到相关错误信息，帮助进一步排查问题。</think>解决CORS策略阻止预检请求的步骤如下： ### 1. 配置服务器响应头 后端需添加以下响应头（以Node.js/Express为例）： ```javascript app.use((req, res, next) => { res.header("Access-Control-Allow-Origin", "http://your-frontend-domain.com"); // 或 * res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); res.header("Access-Control-Allow-Headers", "Content-Type, Authorization"); res.header("Access-Control-Allow-Credentials", "true"); next(); }); ``` 注意：通配符`*`不能与`credentials: true`同时使用[^1] ### 2. 处理OPTIONS预检请求 需显式处理HTTP OPTIONS方法： ```javascript app.options('*', (req, res) => { // 处理所有OPTIONS请求 res.sendStatus(200); }); ``` ### 3. 前端请求配置 确保XMLHttpRequest正确设置： ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); // 触发预检请求 xhr.withCredentials = true; // 携带凭证时需特别配置 ``` ### 4. 中间件配置（框架示例） Spring Boot配置： ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://client-domain.com") .allowedMethods("*") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } } ``` ### 5. 验证响应头 通过浏览器开发者工具检查响应头是否包含： ``` Access-Control-Allow-Origin: http://your-frontend-domain.com Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type Access-Control-Max-Age: 86400 ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值