解决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 25 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue详细的入门笔记
May 10 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
vue elementUI批量上传文件
Apr 26 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
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript实现动态标签云
2015/10/16 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
全面理解Python中self的用法
2016/06/04 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python 解压pkl文件的方法
2018/10/25 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python 遍历pd.Series的index和value
2019/11/26 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python self用法详解
2020/11/28 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
建筑学推荐信
2013/11/03 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
党员承诺书范文2015
2015/04/27 职场文书
入党自传范文2015
2015/06/26 职场文书
清洁工工作总结
2015/08/11 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
DQL数据查询语句使用示例
2022/12/24 MySQL