Vue+SpringBoot+Shiro跨域问题的解决方法

这篇文章将为大家详细讲解有关Vue+SpringBoot+shiro跨域问题的解决方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、配置Vue前端

在config下index.js中配置代理信息

注意：这里的跨域配置只在开发环境中有效，打包部署后，这个跨域就不起作用了，本人也是这里卡了好久，Vue前端打包后，最好部署到nginx上，用nginx可以直接解决跨域问题

1、开发跨域配置

proxyTable: {'/api': {target: 'Http://xxxx.com', //地址changeOrigin: true,pathRewrite: {'^/api': ''  }, }},

在main.js中配置ajax代理请求

var axiOS = require('axios')axios.defaults.baseURL = '/api' //环境

然后就是我们写请求方法的时候在方法前加上“/api”,这个是根据你的配置名，配的啥名就写啥

这样我们前端Vue开发跨域就配置完了

2、生产跨域配置

首先我们看一下代码配置

在网上看了大量的文章资料，说是修改这个，修改那个，事实却是然并卵。。。。

其实我们只需要在config下的index.js中配置好代理信息

proxyTable: {'/api@Configurationpublic class MyWEBConfigurer implements WebmvcConfigurer {@Override   public void addCorsMappings(CorsReGIStry registry) {       registry.addMapping("@Configurationpublic class MyWebConfigurer implements WebMvcConfigurer {    @Bean    public FilterRegistrationBean corsFilter() {        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        final CorsConfiguration config = new CorsConfiguration();        // 允许cookies跨域        config.setAllowCredentials(true);        // #允许向该服务器提交请求的URI，*表示全部允许，在springMVC中，如果设成*，会自动转成当前请求头中的Origin        config.addAllowedOriginPattern("*");        // #允许访问的头信息,*表示全部        config.addAllowedHeader("*");        // 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了        config.setMaxAge(18000L);        // 允许提交请求的方法，*表示全部允许        config.addAllowedMethod("OPTIONS");        config.addAllowedMethod("HEAD");        config.addAllowedMethod("GET");        config.addAllowedMethod("PUT");        config.addAllowedMethod("POST");        config.addAllowedMethod("DELETE");        config.addAllowedMethod("PATCH");        source.registerCorsConfiguration("/**", config);        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));        // 设置监听器的优先级        bean.setOrder(0);        return bean;    }}

关于“Vue+springBoot+Shiro跨域问题的解决方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。