目錄一、配置Vue前端1、開(kāi)發(fā)跨域配置2、生產(chǎn)跨域配置二、配置spring boot

相信大家剛開(kāi)始做都會(huì)遇到這個(gè)問(wèn)題，在網(wǎng)上找了好多也不管用，都寫的不全，

在這里記錄一下，希望對(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)境

然后就是我們寫請(qǐng)求方法的時(shí)候在方法前加上“/api”,這個(gè)是根據(jù)你的配置名，配的啥名就寫啥

這樣我們前端Vue開(kāi)發(fā)跨域就配置完了

2、生產(chǎn)跨域配置

首先我們看一下代碼配置

在網(wǎng)上看了大量的文章資料，說(shuō)是修改這個(gè)，修改那個(gè)，事實(shí)卻是然并卵。。。。

其實(shí)我們只需要在config下的index.js中配置好代理信息

proxyTable: {’/api/*’: {target: ’http://域名’, //生產(chǎn)地址一定要加httpchangeOrigin: true,pathRewrite: {’^/api’: ’/api’ }, }},

上面我們?cè)谂渲帽镜乜缬虻臅r(shí)候設(shè)置了axios默認(rèn)的請(qǐng)求路徑，生產(chǎn)打包不需要配置

這樣我們代碼這里就配置完了，其他的都不要?jiǎng)樱缓髇pm 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;#pidlogs/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; sendfileon; #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.*;/** */@Configurationpublic 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.*;/** */@Configurationpublic 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)求頭中的Originconfig.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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！