处理全局跨域问题,前后端对接

本文介绍了在Vue项目中如何修改.env.development文件设置基础API地址,调整.js文件的请求路径,停用vue.config.js中的mock.js,并在后端添加MyCorsConfig类处理全局跨域问题,包括CORSFilter的配置实现。

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

1.修改.en.development文件

VUE_APP_BASE_API = 'http://localhost:9999'

2.修改.js的请求路径

3.关掉vue.config.js中的mock.js

4.在后端添加一个配置类

@Configuration
public class MyCorsConfig {
    //处理全局跨域问题
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("http://localhost:8888");
        corsConfiguration.setAllowCredentials(true);//传cookies
        corsConfiguration.addAllowedMethod("*");//允许的请求方式例如get,post,Head
        corsConfiguration.addAllowedHeader("*");//允许的头信息
        //过滤资源
        UrlBasedCorsConfigurationSource us = new UrlBasedCorsConfigurationSource();
        us.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(us);
    }
}

<think>好的,我现在需要回答用户关于RuoYi框架前后端分离的具体技术实现和架构的问题。用户之前已经询问过类似的问题,现在想要更详细的架构和实现细节。首先,我需要回忆一下RuoYi前后端分离版本的结构和技术栈。 根据之前的引用内容,RuoYi前后端分离版后端使用Spring Boot,前端使用Vue和Element UI。后端模块包括ruoyi-admin、ruoyi-common、ruoyi-framework等,前端是ruoyi-ui。用户可能想知道这些模块的具体职责,以及前后端如何交互,比如API调用、代理配置等。 接下来,我需要整理技术架构的层次。后端可能采用Spring Boot + MyBatis,权限控制使用Spring Security或者Shiro?需要确认。另外,前端Vue的结构,比如如何管理路由、状态,如何调用后端API,是否需要配置代理,这部分引用中提到Vue的代理设置或Nginx反向代理,所以需要说明这一点。 还要考虑模块化设计,比如ruoyi-generator代码生成器是如何工作的,是不是基于模板引擎?quartz定时任务模块如何集成?系统模块如何划分,比如ruoyi-system可能包含用户、角色管理等。 数据库和Redis的使用场景,比如权限缓存、会话管理?引用中提到需要启动Redis,所以需要解释Redis在项目中的作用,比如缓存验证码、令牌等。 部署方面,前后端如何打包部署?后端可能是jar包,前端通过npm构建生成静态文件,用Nginx托管。需要详细说明这些步骤,或者至少提到关键点,比如配置文件的修改,端口的设置,问题的解决。 另外,用户可能对权限控制的具体实现感兴趣,比如JWT的使用,接口权限如何与后端对接,动态路由在前端如何处理。这部分需要结合Spring Security和Vue的路由守卫来说明。 还需要确保回答结构清晰,分点列出技术架构、模块说明、前后端交互机制、部署流程等。同时,生成的相关问题要围绕技术实现,比如如何扩展模块、如何进行权限定制、如何处理问题等。 最后,检查是否引用了提供的资料,比如引用[2]中的模块说明,引用[1]中的代理配置,引用[3]中的环境搭建步骤。确保引用标识正确,并且自然地融入回答中。</think>### RuoYi前后端分离技术架构详解 #### 一、技术栈组成 **后端技术栈**: - **Spring Boot 2.x**:提供快速应用启动和自动化配置 - **Spring Security + JWT**:实现权限控制和令牌鉴权[^2] - **MyBatis-Plus**:增强型ORM框架,支持代码生成器 - **Redis 5.x**:存储登录令牌、验证码和缓存数据 - **MySQL 5.7+**:主业务数据库 - **Swagger**:API文档自动生成 **前端技术栈**: - **Vue 2.x + Vue Router**:SPA应用核心框架 - **Element UI**:可视化组件库 - **Axios**:封装RESTful API调用 - **Vuex**:全局状态管理 #### 二、核心模块实现 1. **后端模块结构**(基于Maven多模块) ```text ruoyi-admin // 启动模块(含主配置) ruoyi-common // 通用工具(日期处理/字符串工具) ruoyi-framework // 核心框架(AOP/权限拦截) ruoyi-system // 业务模块(用户/角色/菜单) ruoyi-generator // 代码生成(Velocity模板) ruoyi-quartz // 定时任务(集成Quartz) ``` 2. **前端模块结构**(基于Vue CLI) ```text src/api // 接口定义 src/assets // 静态资源 src/components // 公共组件 src/router // 动态路由配置 src/store // Vuex状态管理 src/views // 页面组件 ``` #### 三、关键技术实现 1. **权限控制体系** - **接口鉴权**:通过`JwtAuthenticationTokenFilter`拦截请求,验证JWT令牌有效性 - **数据权限**:使用MyBatis拦截器实现`@DataScope`注解,自动拼接SQL过滤条件 - **菜单权限**:根据角色动态生成Vue路由表,通过`router.addRoutes()`注入[^2] 2. **前后端交互机制** - **API规范**:RESTful风格接口,状态码遵循HTTP标准 - **代理配置**:开发环境通过`vue.config.js`设置代理转发: ```javascript devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } ``` - **处理**:生产环境使用Nginx反向代理,配置示例: ```nginx location /api/ { proxy_pass http://backend-server; proxy_set_header Host $host; } ``` 3. **代码生成器实现** - 基于Velocity模板引擎动态生成代码 - 支持生成:Entity/Mapper/Service/Controller/Vue页面 - 模板路径:`ruoyi-generator/src/main/resources/vm` #### 四、部署架构 ```mermaid graph TD A[浏览器] --> B[Nginx:80] B --> C[前端静态资源] B --> D[后端API网关] D --> E[Spring Boot服务] E --> F[MySQL] E --> G[Redis] ``` #### 五、环境配置要点 1. **数据库初始化**:执行`ry_2021xxxx.sql`和`quartz.sql`[^2] 2. **Redis配置**:修改`application.yml`中的连接信息 3. **前端依赖安装**: ```bash cd ruoyi-ui npm install --registry=https://registry.npmmirror.com ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值