Vue+Spring Security前后端交互如何处理跨域请求

最新推荐文章于 2025-05-10 22:56:58 发布
最新推荐文章于 2025-05-10 22:56:58 发布
阅读量1.9k 收藏 8
点赞数 3
分类专栏： Spring Security Error 文章标签： java spring 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wyg1973017714/article/details/105467549
版权

问题复现

Access to XMLHttpRequest at 'http://localhost:8081/login' 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.

在这里插入图片描述

问题原因

出现这个问题的原因就是我的后端没有写好跨域配置，或者说我刚开始不知道跨域如何配置。后端我是用的是Spring boot+Spring Security+Jwt实现的。刚开始我进行了如下配置：

public class AccessControlAllowOriginFilter implements WebMvcConfigurer {
   
    @Override
    public void addCorsMappings(CorsRegistry registry) {
   
        registry.addMapping("/**")
                .allowedHeaders("Content-Type","X-Reques
最低0.47元/天 解锁文章
Vue+SpringBoot跨域问题出现类似于Access to XMLHttpRequest at 'http://localhost:8081/的错误
qq_40903274的博客
08-26 3409
出现的错误如下： Access to XMLHttpRequest at 'http://localhost:8081/test from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requeste...
Vue+Security+Springboot前后端交互
weixin_68620988的博客
06-21 1027
这时候vue项目中就可以跨域访问路径了,这里的200状态就是security配置文件中返回的状态，如果认证成功就返回200，这里判断如果后端认证成功了，就在这里thi.$router.push()跳转页面，这是一个登录的操作，说白了就是后端拿到的账号密码查询成功就返回200状态码，我这里query：{list:authorlist}是将传过来的用户所拥有的资源通过路径返回了出去给其他页面。4：调用userMapper的selectRole方法查询该员工对应的角色信息，并返回一个Role对象的List。
【跨域问题】Access to XMLHttpRequest at ‘http://localhost:8080/login‘ from origin ‘http://localhost:80
热门推荐
cywleo的博客
04-10 5万+
vue 项目用 axios 进行请求的时候，总是报“Access to XMLHttpRequest at ‘http://localhost:8080/api/login’ from origin ‘http://localhost:8080……’”的错误 这属于跨域问题 解决方法： 找到项目的 config 下的 index.js 在 module.exports 中的 proxyTable 下添加下面的代码 proxyTable: { "/api":{ target: 'h
手把手实现企业级Spring Security Starter安全组件
最新发布
〆、挽风的博客
05-10 949
*** WebSocket 的权限自定义*/@Component@Resource@Override上下文无损传递：TTL实现跨线程数据透传动态权限控制：模块化配置+注解驱动生产级可靠性：异常处理集成高度可扩展：SPI扩展点+配置化策略。
如何解决跨域问题
Crecendow
04-09 779
为什么会有跨域问题 跨域问题源于javaScript的同源策略，它是针对ajax传递参数的时候进行的一种限制。 一个页面发起的ajax请求，只能是与当前页域名相同的路径，这能有效的阻止跨站攻击。 值得一提的是，如果是静态资源的话，是不受跨域问题影响的，你在淘宝页面中去引用一个京东上的图片，是不会产生跨域问题的，同时，你请求这些静态资源的时候，无一例外都是用...
解决Access to XMLHttpRequest at ‘http://localhost:9091/login‘ (redirected from ‘http://localhost:9090/
一株木樨的博客
10-23 4707
解决Access to XMLHttpRequest at
项目报错Access to XMLHttpRequest at http://localhost:8080 from origin http://localhost:8081(前后端分离解决跨域问题)
qq_64734490的博客
11-09 5892
跨域是指浏览器的同源策略限制下，一个域（网站）下的脚本试图去请求另一个域（网站）的资源。同源策略是浏览器的一种安全机制，用于限制一个源的文档或脚本如何与另一个源的资源进行交互，它要求协议、域名和端口都相同，如果这三个中的任何一个不同，就会产生跨域问题。
Vue+Spring Boot前后端分离开发实战源码和ppt.zip
02-02
在"Vue+Spring Boot前后端分离开发实战源码和ppt.zip"这个压缩包中，包含了关于这两个技术结合使用的实战项目源码和相关教程。通过学习这个资源，你可以深入理解如何在实际项目中实现前后端分离的开发模式。 1. **...
Springboot+Vue+shiro实现前后端分离、权限控制的示例代码
08-18
前后端分离意味着前端与后端职责明确，前端负责展示和用户交互，后端负责业务逻辑和数据处理。通信方式通常采用API接口，后端通过HTTP RESTful API提供数据，前端通过Ajax请求获取并渲染。在Springboot中，...
SpringBoot+Vue+SpringSecurity+JWT实现登录
weixin_43203735的博客
05-18 1871
前后端代码：GitHub地址 Vue-Cli创建前端项目 前端项目目录结构 我们需要Login.vue和Home.vue组件，一个用于登录，一个用于登录成功之后的跳转。 我们需要封装一些函数，这些函数用于在前后端交互时请求与响应的拦截。定义api.js 我们还需要删除原有的组件，清除App.vue的内容（不能删除）。 引入Element-ui 参考element-ui官网 在main.js文件中引入Element-ui import ElementUI from 'element-ui'; import
请求数据出现跨域问题。本地启动两个端口号，一个脚手架搭建的前端，一个用node启动的后台服务。
欢迎来到我的频道~
11-09 2531
问题描述： 本地启动两个服务，一个前台，一个后台，访问的时候出现跨域问题。 请求跨域结果如下： Access to XMLHttpRequest at 'http://localhost:5000/users/api/login.do' from origin 'http://localhost:3000' has been blocked by CORS policy: Response ...
Access to XMLHttpRequest at‘httplocalhost跨域问题解决
澎湖Java架构师的博客
03-03 8200
在vue.config.js里配置跨域请求 跨域问题报错 解决 在vue.config.js中配置 module.exports = { // 配置跨域请求 devServer: { port: 8080, host: ‘localhost’, open: true, https: false, proxy: { ‘/api’: { target: ‘http://需要请求的地址/’, ws: true, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ }
express跨域问题—Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:xx
Ls0204_的博客
08-08 3390
Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
SpringBoot项目使用Cors解决跨域问题
weixin_30301183的博客
08-21 386
package com.chitic.supplywater.common.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.we...
Spring-Boot + Spring-Security + Vue 跨域问题
Ravenq的专栏
05-19 5390
原文： http://www.aqcoder.com/post/content?id=40 最近的一个小项目使用了 Spring-Boot + Vue 的前后端分离小项目，项目虽小，也五脏俱全，有自己的用户系统，因此就有了权鉴问题。 Java 领域里有两个权鉴框架比较出名 Shiro 和 Spring Security。这里我们使用了 Spring Security。 必须要了解的概念 CSR...
SpringBoot前后端分离项目遇到的跨区访问限制的问题Access to XMLHttpRequest at‘http://localhost
qq_44932835的博客
02-16 2188
Access to XMLHttpRequest at'http://localhost出现这样的跨域限制问题，解决方案如下: 1.在后端添加过滤器 package com.jack.design_competition.config; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import java
【会导致跨域问题的原因】Access to XMLHttpRequest at‘http://localhost:
xzxailh的博客
10-15 9675
如果项目所有的功能都不能用或者是部分模块的的全部功能不能用，大概率是nginx的问题。1. 如果使用nginx，查看nginx配置文件是否配置后端的请求端口路径。2. 查看后端的controller层是否有@CrossOrigin 注解。如果模块中只有一个功能会报跨域问题，大概率是请求方式和路径不一致导致的。3. 查看前端的请求方式与后端是否一致，查看路径是否一致。以上内容都会导致产生跨域问题。
Access to XMLHttpRequest at ‘http://localhost:8088/upload‘ from origin ‘http://localhost:8080‘ has b
xiaofan空欢喜的博客
07-27 5976
Access to XMLHttpRequest at 'http://localhost:8088/upload' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 前端访问后端链接这个错误，一般是跨域问题所导致的，在后端的接口上加入@CrossOrigin...
vue3+springboot连接前后端的作用
03-30
<think>好的，我需要解释Vue3和Spring Boot连接前后端的作用。首先，得明确前后端分离的概念，然后分点说明各自职责和协作的好处。要确保结构清晰，语言通俗易懂。 首先，用户可能不太清楚前后端分离是什么，应该先简单解释一下。然后介绍Vue3作为前端框架的作用，比如构建用户界面、响应式数据绑定等。接着是Spring Boot在后端的角色，比如处理业务逻辑、数据库交互、提供API等。 然后要讲连接后的作用，比如解耦前后端、提升开发效率、支持多平台、安全性等。每个点需要具体例子，比如前端可以独立开发，后端提供RESTful API，使用JWT保证安全。还要提到跨域问题，如何通过配置解决。 需要注意使用中文，技术术语要准确但不过于晦涩。可能用户需要知道实际开发中的流程，比如API设计、Axios的使用、Spring Boot的CORS配置。最后总结整体优势，比如维护性、扩展性、团队协作等。 检查是否有遗漏的点，比如部署独立、性能优化。确保回答结构清晰，分点明确，符合用户的需求。避免使用复杂代码，但可以提到关键工具和技术，如Axios、JWT、CORS。</think>Vue3与Spring Boot连接前后端的作用主要体现在**前后端分离架构**的实现上，这种协作方式为现代Web开发带来了显著优势。以下是分步解析： --- ### 一、前后端分离的核心思想 1. **职责划分** - **前端（Vue3）**：专注UI渲染、用户交互和客户端逻辑 ```javascript // 例如：通过axios调用后端API axios.get('/api/users').then(response => this.users = response.data) ``` - **后端（Spring Boot）**：处理业务逻辑、数据库操作和API提供 ```java // 例如：Spring Boot中定义RESTful接口 @GetMapping("/api/users") public List<User> getUsers() { return userService.findAll(); } ``` 2. **解耦优势** - 前端团队可独立开发UI，无需等待后端接口 - 后端团队专注于业务逻辑，无需处理页面渲染 --- ### 二、连接后的关键作用 #### 1. 数据交互标准化 - **HTTP协议 + JSON格式** Vue3通过`axios/fetch`发送请求，Spring Boot返回统一JSON数据 ```json // 响应示例 { "code": 200, "data": [...] } ``` #### 2. 开发效率提升 - **并行开发**：前端可基于Mock数据开发，后端完成接口后再联调 - **热重载支持**：Vue3的Vite工具与Spring Boot DevTools实现快速调试 #### 3. 安全与权限控制 - **JWT认证**：前端存储Token，后端验证请求合法性 ```java // Spring Security配置JWT过滤器 http.addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class) ``` #### 4. 跨域问题解决 - **CORS配置**：Spring Boot中设置允许前端域名访问 ```java @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**").allowedOrigins("http://localhost:8080"); } }; } ``` --- ### 三、典型协作流程 1. **API契约先行**：使用Swagger/YAPI定义接口文档 2. **前端请求处理**：Vue组件通过`axios`发起HTTP请求 3. **后端响应处理**：Spring Boot Controller返回JSON数据 4. **异常统一处理**：后端定义全局异常处理器返回标准错误格式 --- ### 四、扩展优势 - **微服务友好**：前端可同时对接多个Spring Boot微服务 - **部署独立**：前端打包静态资源部署至Nginx/CDN，后端部署到Tomcat/Docker - **技术栈灵活性**：前端可替换为React/Angular，后端可切换为Python/Django --- ### 五、适用场景 - 企业级管理系统（如OA、CRM） - 电商平台 - 数据可视化大屏 - 移动端配套后台 通过这种架构，Vue3与Spring Boot的组合实现了**高内聚低耦合**的系统设计，显著提升了项目的可维护性和团队协作效率。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值