解决Vue+SpringBoot+Shiro跨域问题
⽬录
⼀、配置Vue前端
1、开发跨域配置
2、⽣产跨域配置
⼆、配置spring boot
相信⼤家刚开始做都会遇到这个问题，在⽹上了好多也不管⽤，都写的不全，
在这⾥记录⼀下，希望对⼤家有所帮助
⼀、配置Vue前端
在config下index.js中配置代理信息
注意：这⾥的跨域配置只在开发环境中有效，打包部署后，这个跨域就不起作⽤了，本⼈也是这⾥卡了好久，Vue前端打包后，最好部署到nginx上，⽤nginx可以直接解决跨域问题
1、开发跨域配置
proxyTable: {
'/api': {
target: 'xxxx', //地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
}
},
在main.js中配置Ajax代理请求
var axios = require('axios')
axios.defaults.baseURL = '/api' //环境
然后就是我们写请求⽅法的时候在⽅法前加上“/api”，这个是根据你的配置名，配的啥名就写啥
这样我们前端Vue开发跨域就配置完了
2、⽣产跨域配置
⾸先我们看⼀下代码配置
在⽹上看了⼤量的⽂章资料，说是修改这个，修改那个，事实却是然并卵。。。。
其实我们只需要在config下的index.js中配置好代理信息
proxyTable: {
'/api/*': {
target: '域名', //⽣产地址⼀定要加http
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
},
}
},
上⾯我们在配置本地跨域的时候设置了axios默认的请求路径，⽣产打包不需要配置
这样我们代码这⾥就配置完了，其他的都不要动，然后npm run build 打包就可以了
剩下的事情就交给nginx就可以了，我是在windows服务上部署的nginx，这个安装步骤⽹上⼀⼤堆，这⾥就不说了我们安装好nginx后，需要进⾏⼀些配置
1、删除nginx下html⽬录⾥的内容
2、将我们Vue打好的包dist复制到nginx的html⽬录下,
3、配置nginx下config⽬录下f，配置内容如下：
这⾥说明⼀下：nginx应⽤的⽂件⽬录名改⼀下，我们直接安装完都是，类似这样的⽬录，我们在配置上图中的root路径时，/n可能会有编译问题，我这⾥是改成了ProNginx,⼤家可以改为⾃⼰喜欢的名
这是我nginx的所有配置
#user nobody;
worker_processes 1;
#error_log logs/error.log;
springboot是啥
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include pes;
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 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 t.annotation.Bean;
import t.annotation.Configuration;
import org.s.CorsConfiguration;
import org.s.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.fig.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 t.annotation.Bean;
import t.annotation.Configuration;
import org.s.CorsConfiguration;
import org.s.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.fig.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");
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
// 设置的优先级
bean.setOrder(0);
return bean;
}
}
到此这篇关于解决Vue+SpringBoot+Shiro跨域问题的⽂章就介绍到这了，更多相关Vue SpringBoot Shiro跨域内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论