解决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 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python书籍信息爬虫实例
2018/03/19 Python
python实现名片管理系统项目
2019/04/26 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
高级Java程序员面试要点
2013/08/02 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
团代会宣传工作方案
2014/05/08 职场文书
企业文明单位申报材料
2014/05/16 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年公司工作总结
2015/04/25 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP