vue CORS error跨域问题及解决过程
更新时间：2026年06月10日 09:44:45 作者：零零零零零零零零零
这段描述主要讲解了浏览器报错AccesstoXMLHttpRequest的CORS政策限制问题,并提供了解决方法,包括在后端设置Access-Control-Allow-Origin头部和使用@CrossOrigin注解,适用于SpringBoot框架
浏览器报错
Access to XMLHttpRequest at 'http://localhost:9070/rooms' from origin
'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个错误提示是因为浏览器的同源策略（Same-Origin Policy）限制了跨域请求。
在默认情况下
浏览器只允许在同一域名下的请求，如果请求的域名不同，就会出现CORS错误。
要解决这个问题，需要在后端服务器上设置CORS头部，允许跨域请求。
具体的方法
是在后端服务器的响应头部中添加Access-Control-Allow-Origin头部，指定允许跨域请求的域名。
如果你使用的是Spring Boot框架，可以在Controller类或方法上添加@CrossOrigin注解，指定允许跨域请求的域名。
例如：
@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class RoomController {
@GetMapping("/rooms")
public List<Room> getRooms() {
// ...
}
}
这样就可以允许来自http://localhost:8080域名的跨域请求了。
如果你使用的是其他后端框架，可以查阅相应的文档，了解如何设置CORS头部。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue实现商品飞入购物车效果(电商项目)，这种效果在一些电商平台经常会用到，今天小编通过代码详解,需要的朋友可以参考下2019-11-11
本文主要介绍了vue样式穿透的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
WangEditor是一个开源的富文本编辑器,由阿里云开发,它提供了一套简洁易用的API和丰富的功能,如拖拽上传图片、插入表格、自定义表情等,适用于网页和移动应用中的内容编辑场景,本文介绍了Vue使用wangeditor创建富文本编辑器的完整指南,需要的朋友可以参考下2024-08-08
vue在 for 循环里使用异步调用 async/await的方法
大家都遇到这样的问题,在使用函数的async/await异步调用时候,放在正常函数中单个调用时没有问题的,但是await放在forEach()循环里面就会报错,本文给大家介绍vue 如何在 for 循环里面使用异步调用 async/await,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue实现登陆功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇vue 本地环境跨域请求proxyTable的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了Vue2 cube-ui时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章主要介绍了Vue-基本标签和自定义控件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了让Vue也可以使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下2020-01-01
最新评论