spring boot vue跨域,springboot shiro 跨域

　　本文将结合示例代码解决Vue SpringBoot Shiro的跨域问题。相信大家一开始都会遇到这个问题。让我们跟着边肖学。

　　:

目录

　　 1.配置Vue前端1。开发跨域配置2。产生跨域配置2。配置弹簧靴。相信大家刚开始做的时候都会遇到这个问题。网上找很多都不行，都不全。

　　在这里记录一下吧。希望对你有帮助。

一、配置Vue前端

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

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

1、开发跨域配置

　　代理表：{

　　/api: {

　　目标： http://xxxx.com ，//地址

　　changeOrigin:真的，

　　路径重写：{

　　^/api:

　　},

　　}

　　},

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

　　var axios=require(axios )

　　axios . defaults . base URL=/API //environment

　　然后，我们写请求方法的时候，在方法前面加上“/api”。这是基于您的配置名称，您可以编写任何匹配的名称。

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

2、生产跨域配置

　　我们先来看看代码配置。

　　我在网上看了很多文章和资料，说是修改这个修改那个，但事实是这是巧合。

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

　　代理表：{

　　/api/*: {

　　目标：“http://域名”，//生产地址必须添加http

　　changeOrigin:真的，

　　路径重写：{

　　^/api: /api

　　},

　　}

　　},

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

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

　　剩下的就交给nginx吧。我在windows服务上部署了nginx。网上有很多安装步骤，这里就不说了。

　　在我们安装nginx之后，我们需要做一些配置。

　　1.删除nginx下html目录的内容。

　　2.把我们Vue做的包dist复制到nginx的html目录下，

　　3.在nginx下的config目录中配置nginx.conf。配置内容如下：

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

　　这是我nginx的所有配置。

　　#用户nobody

　　worker _ process 1；

　　# error _ log logs/error . log；

　　# error _ log logs/error . log notice；

　　# error _ log logs/error . log info；

　　# PID logs/nginx . PID；

　　事件{

　　工人_连接1024；

　　}

　　http {

　　包括mime.types

　　default_type应用程序/八位字节流；

　　# 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；

　　在上发送文件；

　　# tcp _ nopush on

　　# keepalive _ time out 0；

　　keepalive _ timeout 65

　　# gzip on

　　服务器{

　　听80；

　　Server_name前端办公室域名/IP；

　　root D:/HWKJ/ProNginx/ProNginx/html/dist/；

　　位置/{

　　索引index.php index.html index.htm；

　　try _ files $ uri $ uri//index . html；

　　}

　　位置/api/{

　　#重写^.api/？(.*)$/$ 1 break；

　　# include uwsgi _ params

　　proxy_pass http://xxx后台xxxx/API/；

　　#解决springboot中远程ip的获取问题

　　}

　　}

　　}

　　配置完成后，我们启动nginx。下面是nginx的一些操作命令。

　　启动nginx //启动

　　Nginx -s stop //stop是快速停止Nginx，可能不会保存相关信息。

　　Nginx -s quit //quit是一个完整有序的停止Nginx并保存相关信息的方法。

　　NGX-S reload//当配置信息被修改并且需要重新加载这些配置时，使用该命令。

　　Ngx-s重新打开//重新打开日志文件

　　NGX-V//查看Nginx版本

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

　　我们来配置一下春装开机背景。

二、配置spring boot

　　如果只有spring boot，可以配置信息。

　　导入org . spring framework . boot . spring boot configuration；

　　import org . spring framework . boot . web . servlet . filterregistrationbean；

　　导入org . spring framework . context . annotation . bean；

　　导入org。spring框架。语境。注释。配置；

　　导入org。spring框架。网络。CORS。CORS配置；

　　导入org。spring框架。网络。CORS。urlbasedcorconfigurationsource；

　　导入org。spring框架。网络。过滤器。CORS滤波器；

　　导入org。spring框架。网络。servlet。配置。注释。*;

　　/**

　　*/

　　@配置

　　公共类MyWebConfigurer实现webmvc配置器{

　　@覆盖

　　public void addCorsMappings(CORS注册中心注册表){

　　注册表。添加映射(/* *)//允许跨域访问的路径。allowCredentials(true) //是否发送甜饼干。allowedOriginPatterns(*) //允许跨域访问的源。allowedMethods(POST ， GET ， PUT ， OPTIONS ， DELETE) //允许请求方法。allowedHeaders(*) //允许头部设置。maxAge(168000)；//预检间隔时间

　　}

　　}

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

　　导入org。spring框架。靴子。弹簧靴配置；

　　导入组织。spring框架。靴子。网络。servlet。filterregistrationbean

　　导入org。spring框架。语境。注释。豆；

　　导入org。spring框架。语境。注释。配置；

　　导入org。spring框架。网络。CORS。CORS配置；

　　导入org。spring框架。网络。CORS。urlbasedcorconfigurationsource；

　　导入org。spring框架。网络。过滤器。CORS滤波器；

　　导入org。spring框架。网络。servlet。配置。注释。*;

　　/**

　　*/

　　@配置

　　公共类MyWebConfigurer实现webmvc配置器{

　　@Bean

　　public FilterRegistrationBean CORS过滤器(){

　　final UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource()；

　　最终CORS配置config=新CORS配置()；

　　//允许饼干跨域

　　配置。setallowcredentials(true)；

　　//#允许向该服务器提交请求的URI *表示全部允许，在学习笔记一中，如果设成*,会自动转成当前请求头中的起源

　　配置。addallowedoriginpattern( * )；

　　//#允许访问的头信息，*表示全部

　　配置。addallowedheader( * )；

　　//预检请求的缓存时间（秒),即在这个时间段里，对于相同的跨域请求不会再预检了

　　配置。设置maxage(18000 l)；

　　//允许提交请求的方法，*表示全部允许

　　配置。addallowedmethod( OPTIONS )；

　　配置。addallowedmethod( HEAD )；

　　配置。addallowedmethod( GET )；

　　配置。addallowedmethod( PUT )；

　　配置。addallowedmethod(" POST ")；

　　配置。addallowedmethod( DELETE )；

　　配置。addallowedmethod( PATCH )；

　　来源。registercorsconfiguration(/* * ，config)；

　　FilterRegistrationBean bean=new FilterRegistrationBean(新CORS过滤器(源))；

　　//设置监听器的优先级

　　比恩。设置顺序(0)；

　　回豆；

　　}

　　}

　　到此这篇关于解决Vue SpringBoot Shiro跨域问题的文章就介绍到这了，更多相关Vue SpringBoot Shiro跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。