欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決Vue+SpringBoot+Shiro跨域問(wèn)題

 更新時(shí)間:2021年06月09日 11:09:23   作者:Java璐到底  
本文將結(jié)合實(shí)例代碼,解決Vue+SpringBoot+Shiro跨域問(wèn)題,相信大家剛開(kāi)始做都會(huì)遇到這個(gè)問(wèn)題,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

相信大家剛開(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)文章希望大家以后多多支持腳本之家!

相關(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)

    這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國(guó)地圖省份點(diǎn)擊聯(lián)動(dòng),需要的朋友可以參考下
    2022-04-04
  • Vue開(kāi)發(fā)實(shí)現(xiàn)滑動(dòng)驗(yàn)證組件

    Vue開(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-07
  • vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式

    vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式

    這篇文章主要介紹了vue-cli項(xiàng)目使用vue-picture-preview圖片預(yù)覽組件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue scoped及deep使用方法解析

    Vue scoped及deep使用方法解析

    這篇文章主要介紹了Vue scoped及deep使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-08-08
  • Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題

    Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題

    這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別

    vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別

    這篇文章主要介紹了vue 函數(shù)調(diào)用加括號(hào)與不加括號(hào)的區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-10-10
  • vue.js父組件使用外部對(duì)象的方法示例

    vue.js父組件使用外部對(duì)象的方法示例

    在我們?nèi)粘i_(kāi)發(fā)中經(jīng)常因?yàn)樗季S定式,我們會(huì)犯一些奇怪的錯(cuò)誤,有時(shí)候看似簡(jiǎn)單的問(wèn)題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法,這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問(wèn)題,有必要和大家分享下,需要的朋友可以參考學(xué)習(xí),下面來(lái)看看吧。
    2017-04-04
  • Vue組件通信入門(mén)之Provide和Inject機(jī)制

    Vue組件通信入門(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-12
  • vue-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)簽的方法

    這篇文章主要介紹了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
  • vue3:setup語(yǔ)法糖使用教程

    vue3:setup語(yǔ)法糖使用教程

    <script setup>是在單文件組件中使用Composition API的編譯時(shí)語(yǔ)法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語(yǔ)法糖使用的相關(guān)資料,需要的朋友可以參考下
    2022-08-08

最新評(píng)論