若依 - 改造RuoYi-vue(一) 跨域

摘自 ： http://zjlgd.cn/article/6

​ 修改开源项目https://gitee.com/y_project/RuoYi-Vue，进行自己的开发。

​ 本文主要围绕ruoyi讲述，允许跨域、前后端分离项目前端以及后端的代码编写。应用此项目需要你初步掌握vue.js 和 springboot。

本人是后端的程序员，并不熟悉vue所以下文讲解可能粗糙点。

注意：请从上之下看此篇博文。

检出项目

此处需要安装git 以使用git命令检出ruoyi-vue项目。

	git clone https://gitee.com/y_project/RuoYi-Vue.git

检出项目结果如下：

• .git git配置
• ruoyi 后端代码
• ruoyi-ui 前端代码

本文中将使用Visual Studio Code进行前端代码的书写，JetBrains idea修改后端代码。

前端代码

使用Visual Studio Code打开ruoyi-ui文件夹，以此点击终端->新建终端，在终端执行以下命令

npm install

npm run dev

前端跑起来之后，访问http://localhost:1024/ ，发现验证码没加载出来，F12查看Network发现请求了后台的

Failed to load resource: the server responded with a status of 401 (Unauthorized)
:1024/dev-api/captchaImage

访问后台接口失败，需要修改配置 .env.development 这个文件，将 VUE_APP_BASE_API = '/dev-api' 改为 http://127.0.0.1:8080

此处我会修改后端端口为8060，因为我的8080被docker某个镜像给占了。

后端

使用JetBrains idea打开ruoyi文件夹，此项目使用的是maven。

修改application-druid.yml数据库连接设置为本地的数据库地址，修改完成后将项目跑起来。

可能还需要修改 logback.xml 文件的 <property name="log.path" value="/home/ruoyi/logs" />，将value改为你本地的地址。

跨域

​ 将前后端都跑起来后发现验证码还是没加载出来，查看错误后发现是跨域问题。这是由于前后端都在同一台机器上的原因，如果你的部署或者开发不在同一台机器，可以忽略以下操作。

Cross-origin resource sharing (CORS) is a W3C specification implemented by most browsers that allows you to specify in a flexible way what kind of cross domain requests are authorized, instead of using some less secured and less powerful hacks like IFrame or JSONP.

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

Spring MVC支持跨域，在spring官方文档中可以看到在controller上使用@CrossOrigin就可以解决跨域问题。

你可以在后端项目 com.ruoyi.project.common.CaptchaController#getCode 方法上使用此方法。

但是前端向后端发起请求不止一个验证码图片的请求，我们需要一个全局的策略。按照spring官方所给的全局配置。

新建CorsConfig.class, 如下

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @program:
 * @description:
 * @author: 
 * @create: 
 */
@Configuration
public class CorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

}

因为ruoyi后端项目还使用了spring-security，还需一步配置，修改com.ruoyi.framework.config.SecurityConfig#configure(org.springframework.security.config.annotation.web.builders.HttpSecurity)方法（ruoyi的配置里面已经有spring-security配置，所以需要给里面加点东西）

@Override
    protected void configure(HttpSecurity httpSecurity) throws Exception
    {
        httpSecurity
                // CRSF禁用，因为不使用session
                .csrf().disable()
                // 认证失败处理类
                .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                // 基于token，所以不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                // 过滤请求
                .authorizeRequests()
                // 对于登录login 验证码captchaImage 允许匿名访问
                .antMatchers("/login", "/captchaImage").anonymous()
                .antMatchers(
                        HttpMethod.GET,
                        "/*.html",
                        "/**/*.html",
                        "/**/*.css",
                        "/**/*.js"
                ).permitAll()
                .antMatchers("/profile/**").anonymous()
                .antMatchers("/common/download**").anonymous()
                .antMatchers("/swagger-ui.html").anonymous()
                .antMatchers("/swagger-resources/**").anonymous()
                .antMatchers("/webjars/**").anonymous()
                .antMatchers("/*/api-docs").anonymous()
                .antMatchers("/druid/**").anonymous()
                // 除上面外的所有请求全部需要鉴权认证
                .anyRequest().authenticated()
                .and()
                .cors()
                .and()
                .headers().frameOptions().disable();
        httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
        // 添加JWT filter
        httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }

添加了这样两行在最后

.cors()
.and()

重新启动后端程序，发现已经无跨域问题。

扩展

npm run XXX

https://segmentfault.com/q/1010000005694821

跨域

跨域的解释 -> https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

springBoot -> https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

spring-security -> https://docs.spring.io/spring-security/site/docs/4.2.x/reference/html/cors.html

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: 2020/03/05 15:47