解决Vue+SpringBoot+Shiro跨域问题


Posted in Vue.js onJune 09, 2021

相信大家刚开始做都会遇到这个问题,在网上找了好多也不管用,都写的不全,

在这里记录一下,希望对大家有所帮助

一、配置Vue前端

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

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

1、开发跨域配置

解决Vue+SpringBoot+Shiro跨域问题

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

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

解决Vue+SpringBoot+Shiro跨域问题

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

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

解决Vue+SpringBoot+Shiro跨域问题

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

2、生产跨域配置

首先我们看一下代码配置

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

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

解决Vue+SpringBoot+Shiro跨域问题

proxyTable: {
'/api/*': {
target: 'http://域名', //生产地址一定要加http
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
  },
 }
},

上面我们在配置本地跨域的时候设置了axios默认的请求路径,生产打包不需要配置

解决Vue+SpringBoot+Shiro跨域问题

 这样我们代码这里就配置完了,其他的都不要动,然后npm run build 打包就可以了

剩下的事情就交给nginx就可以了,我是在windows服务上部署的nginx,这个安装步骤网上一大堆,这里就不说了

我们安装好nginx后,需要进行一些配置

1、删除nginx下html目录里的内容

2、将我们Vue打好的包dist复制到nginx的html目录下,

3、配置nginx下config目录下nginx.conf,配置内容如下:

解决Vue+SpringBoot+Shiro跨域问题

这里说明一下:nginx应用的文件目录名改一下,我们直接安装完都是nginx-1.xx,类似这样的目录,我们在配置上图中的root路径时,/n可能会有编译问题,我这里是改成了ProNginx,大家可以改为自己喜欢的名

这是我nginx的所有配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

server {
        listen       80;
        server_name  前台服务域名/IP;
        root   D:/HWKJ/ProNginx/ProNginx/html/dist/;
        
        location / {
            index index.php index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
            location /api/ {
            #rewrite  ^.+api/?(.*)$ /$1 break;
            #include  uwsgi_params;
            proxy_pass http://xxx后台xxxx/api/;
            # 解决springboot中获取远程ip的问题
        }
    }
}

配置完后我们启动nginx,以下是nginx一些操作命令

start nginx  //启动
nginx -s stop // stop是快速停止nginx,可能并不保存相关信息
nginx -s quit // quit是完整有序的停止nginx,并保存相关信息
nginx -s reload // 当配置信息修改,需要重新载入这些配置时使用此命令
nginx -s reopen // 重新打开日志文件
nginx -v // 查看Nginx版本

这样我们前端Vue生产跨域就配置完了

下面我们配置spring boot后台

二、配置spring boot

如果说你是单只有spring boot那么你配置一下信息即可

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.*;


/**
 */
@Configuration
public class MyWebConfigurer implements WebMvcConfigurer {

@Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**") // 允许跨域访问的路径
               .allowCredentials(true)  // 是否发送cookie
               .allowedOriginPatterns("*")   // 允许跨域访问的源
               .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求方法
               .allowedHeaders("*")  // 允许头部设置
               .maxAge(168000) ;    // 预检间隔时间

   }  
}

如果你的spring boot后台整合了shiro,那上面的配置对走shiro的请求不会生效,浏览器还是会提示跨域,因此我们用下列方法设置允许跨域访问

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.*;


/**
 
 */
@Configuration
public 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跨域问题的文章就介绍到这了,更多相关Vue SpringBoot Shiro跨域内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
You might like
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP数组实例详解
2016/06/26 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js精度溢出解决方案
2012/12/02 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python的Template使用指南
2014/09/11 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
一套Java笔试题
2016/08/20 面试题
数据库基础的一些面试题
2012/02/25 面试题
片区教研活动总结
2014/07/02 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
大雁塔英文导游词
2015/02/10 职场文书
交心谈心活动总结
2015/05/11 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
素质教育学习心得体会
2016/01/19 职场文书
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS