Vue+Spring Boot+Redis前后端分离部署中的注意事项

2023-12-09 21:00:01

在进行Vue+Spring Boot+Redis前后端分离系统部署时，常会遇到一些问题，本文将重点介绍其中一些常见的坑，并提供相应的解决方法，供后续部署时参考。

跨域问题

部署完成后，前端页面在浏览器中打开时可能出现跨域问题，表现为无法获取后端数据或操作失败。解决办法如下：

在Spring Boot后端配置允许跨域访问：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type")
                .exposedHeaders("Authorization")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

在前端Vue项目中，设置跨域代理：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
        }
    }
}

静态资源问题

如果部署后静态资源（如CSS、JS）无法正常加载，可能是由于静态资源路径配置不当导致的。解决办法如下：

在Spring Boot后端配置静态资源路径：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}