解決Vue+SpringBoot+Shiro跨域問(wèn)題
相信大家剛開(kāi)始做都會(huì)遇到這個(gè)問(wèn)題,在網(wǎng)上找了好多也不管用,都寫(xiě)的不全,
在這里記錄一下,希望對(duì)大家有所幫助
一、配置Vue前端
在config下index.js中配置代理信息
注意:這里的跨域配置只在開(kāi)發(fā)環(huán)境中有效,打包部署后,這個(gè)跨域就不起作用了,本人也是這里卡了好久,Vue前端打包后,最好部署到nginx上,用nginx可以直接解決跨域問(wèn)題
1、開(kāi)發(fā)跨域配置
proxyTable: { '/api': { target: 'http://xxxx.com', //地址 changeOrigin: true, pathRewrite: { '^/api': '' }, } },
在main.js中配置Ajax代理請(qǐng)求
var axios = require('axios') axios.defaults.baseURL = '/api' //環(huán)境
然后就是我們寫(xiě)請(qǐng)求方法的時(shí)候在方法前加上“/api”,這個(gè)是根據(jù)你的配置名,配的啥名就寫(xiě)啥
這樣我們前端Vue開(kāi)發(fā)跨域就配置完了
2、生產(chǎn)跨域配置
首先我們看一下代碼配置
在網(wǎng)上看了大量的文章資料,說(shuō)是修改這個(gè),修改那個(gè),事實(shí)卻是然并卵。。。。
其實(shí)我們只需要在config下的index.js中配置好代理信息
proxyTable: { '/api/*': { target: 'http://域名', //生產(chǎn)地址一定要加http changeOrigin: true, pathRewrite: { '^/api': '/api' }, } },
上面我們?cè)谂渲帽镜乜缬虻臅r(shí)候設(shè)置了axios默認(rèn)的請(qǐng)求路徑,生產(chǎn)打包不需要配置
這樣我們代碼這里就配置完了,其他的都不要?jiǎng)?,然后npm run build 打包就可以了
剩下的事情就交給nginx就可以了,我是在windows服務(wù)上部署的nginx,這個(gè)安裝步驟網(wǎng)上一大堆,這里就不說(shuō)了
我們安裝好nginx后,需要進(jìn)行一些配置
1、刪除nginx下html目錄里的內(nèi)容
2、將我們Vue打好的包dist復(fù)制到nginx的html目錄下,
3、配置nginx下config目錄下nginx.conf,配置內(nèi)容如下:
這里說(shuō)明一下:nginx應(yīng)用的文件目錄名改一下,我們直接安裝完都是nginx-1.xx,類似這樣的目錄,我們?cè)谂渲蒙蠄D中的root路徑時(shí),/n可能會(huì)有編譯問(wè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 前臺(tái)服務(wù)域名/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后臺(tái)xxxx/api/; # 解決springboot中獲取遠(yuǎn)程ip的問(wèn)題 } } }
配置完后我們啟動(dòng)nginx,以下是nginx一些操作命令
start nginx //啟動(dòng) nginx -s stop // stop是快速停止nginx,可能并不保存相關(guān)信息 nginx -s quit // quit是完整有序的停止nginx,并保存相關(guān)信息 nginx -s reload // 當(dāng)配置信息修改,需要重新載入這些配置時(shí)使用此命令 nginx -s reopen // 重新打開(kāi)日志文件 nginx -v // 查看Nginx版本
這樣我們前端Vue生產(chǎn)跨域就配置完了
下面我們配置spring boot后臺(tái)
二、配置spring boot
如果說(shuō)你是單只有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("/**") // 允許跨域訪問(wèn)的路徑 .allowCredentials(true) // 是否發(fā)送cookie .allowedOriginPatterns("*") // 允許跨域訪問(wèn)的源 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允許請(qǐng)求方法 .allowedHeaders("*") // 允許頭部設(shè)置 .maxAge(168000) ; // 預(yù)檢間隔時(shí)間 } }
如果你的spring boot后臺(tái)整合了shiro,那上面的配置對(duì)走shiro的請(qǐng)求不會(huì)生效,瀏覽器還是會(huì)提示跨域,因此我們用下列方法設(shè)置允許跨域訪問(wèn)
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); // #允許向該服務(wù)器提交請(qǐng)求的URI,*表示全部允許,在SpringMVC中,如果設(shè)成*,會(huì)自動(dòng)轉(zhuǎn)成當(dāng)前請(qǐng)求頭中的Origin config.addAllowedOriginPattern("*"); // #允許訪問(wèn)的頭信息,*表示全部 config.addAllowedHeader("*"); // 預(yù)檢請(qǐng)求的緩存時(shí)間(秒),即在這個(gè)時(shí)間段里,對(duì)于相同的跨域請(qǐng)求不會(huì)再預(yù)檢了 config.setMaxAge(18000L); // 允許提交請(qǐng)求的方法,*表示全部允許 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)); // 設(shè)置監(jiān)聽(tīng)器的優(yōu)先級(jí) bean.setOrder(0); return bean; } }
到此這篇關(guān)于解決Vue+SpringBoot+Shiro跨域問(wèn)題的文章就介紹到這了,更多相關(guān)Vue SpringBoot Shiro跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue+SpringBoot前后端分離中的跨域問(wèn)題
- vue+springboot前后端分離工程跨域問(wèn)題解決方案解析
- 詳解springboot和vue前后端分離開(kāi)發(fā)跨域登陸問(wèn)題
- 解決Vue調(diào)用springboot接口403跨域問(wèn)題
- 解決前后端分離 vue+springboot 跨域 session+cookie失效問(wèn)題
- vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求
- vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題解決方法
- SpringBoot和前端Vue的跨域問(wèn)題及解決方案
相關(guān)文章
vue + echarts實(shí)現(xiàn)中國(guó)省份地圖點(diǎn)擊聯(lián)動(dòng)
這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國(guó)地圖省份點(diǎn)擊聯(lián)動(dòng),需要的朋友可以參考下2022-04-04Vue開(kāi)發(fā)實(shí)現(xiàn)滑動(dòng)驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開(kāi)發(fā)實(shí)現(xiàn)簡(jiǎn)單的滑動(dòng)驗(yàn)證組件,并且適配移動(dòng)和PC,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-07-07vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式
這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別
這篇文章主要介紹了vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10Vue組件通信入門(mén)之Provide和Inject機(jī)制
這篇文章主要給大家介紹了關(guān)于Vue組件通信入門(mén)之Provide和Inject機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue組件通信具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽的方法
這篇文章主要介紹了vue-meta實(shí)現(xiàn)router動(dòng)態(tài)設(shè)置meta標(biāo)簽,實(shí)現(xiàn)思路非常簡(jiǎn)單內(nèi)容包括mata標(biāo)簽的特點(diǎn)和mata標(biāo)簽共有兩個(gè)屬性,分別是http-equiv屬性和name屬性,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解需要的朋友可以參考下2022-11-11