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

vue項目部署跨域問題的詳細解決過程

 更新時間:2022年05月01日 08:52:50   作者:家家小迷弟  
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

跨域問題在前后端分離項目很常見,至于為什么會跨域,同源策略,百度各種博客都很詳細,這里不再介紹,主要記錄項目中的各種設(shè)置,解決的過程。

首先是后端:

過濾器:

@Configuration
public class GlobalCorsConfig  {

    /**
     * 允許跨域調(diào)用的過濾器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允許所有域名進行跨域調(diào)用
        config.addAllowedOriginPattern("*");
       // config.addAllowedOrigin("*");
        //允許跨越發(fā)送cookie
        config.setAllowCredentials(true);
        //放行全部原始頭信息
        config.addAllowedHeader("*");
        //允許所有請求方法跨域調(diào)用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

如果setAllowCredentials為true,則config.addAllowedOrigin("*")的參數(shù)就不能是*,必須指明,這里直接注釋掉,使用addAllowedOriginPattern

Controller層:

路徑里包含了web,這個很重要,記住

yml文件:

后端的端口8086,應(yīng)用上下文路徑:/weijianweiAdminApi

再是前端:

dev.env.js中設(shè)置BASE_API為/web

在index.js中設(shè)置dev里面的proxyTable,這里是在開發(fā)過程中,在node.js上實現(xiàn)的一個轉(zhuǎn)發(fā),將請求轉(zhuǎn)發(fā)到后端,主要解決了開發(fā)過程中的跨域問題。

設(shè)置完這些以后,npm run dev,項目在本地可以運行了

開發(fā)完成以后,項目打包,放到服務(wù)器上:

首先在服務(wù)器的nginx的html文件夾中創(chuàng)建文件夾命名為weijianwei

將npm run build 打包生成的文件放在weijianwei中:

修改index里面的assetsPublicPath為weijianwei,對應(yīng)上面文件夾名稱

設(shè)置nginx配置文件nginx.conf:

 server {
        listen       8099;      
		server_name  localhost;
		location /weijianweiAdminApi/ {
            proxy_set_header Host $host;
			proxy_set_header  X-Real-IP        $remote_addr;
			proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
			proxy_set_header X-NginX-Proxy true;
			client_max_body_size 200m;
			proxy_pass http://localhost:8086;
        }
    }

監(jiān)聽端口8099,匹配路徑weijianweiAdminApi,將其轉(zhuǎn)發(fā)到http://localhost:8086上,

此時訪問項目:http://localhost:8099/weijianwei 成功出現(xiàn)頁面,登錄時候,預(yù)檢請求通過,正式請求報跨域問題

前端項目prod.env.js設(shè)置 BASE_API:

成功登錄訪問

總結(jié)

到此這篇關(guān)于vue項目部署跨域問題的文章就介紹到這了,更多相關(guān)vue項目部署跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue mounted組件的使用

    vue mounted組件的使用

    這篇文章主要介紹了vue mounted組件的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue配置根目錄詳細步驟(用@代表src目錄)

    vue配置根目錄詳細步驟(用@代表src目錄)

    vue用@表示src文件夾,引入時找文件路徑更方便,下面這篇文章主要給大家介紹了關(guān)于vue配置根目錄(用@代表src目錄)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • vue項目實現(xiàn)一鍵網(wǎng)站換膚效果實例(webpack-theme-color-replacer的使用)

    vue項目實現(xiàn)一鍵網(wǎng)站換膚效果實例(webpack-theme-color-replacer的使用)

    換皮膚一般都是點擊一個按鈕彈出一些皮膚的選項,選中選項后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下
    2023-02-02
  • vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼

    vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼

    這篇文章主要介紹了vue權(quán)限管理系統(tǒng)的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue導(dǎo)出excel的兩種實現(xiàn)方式代碼

    vue導(dǎo)出excel的兩種實現(xiàn)方式代碼

    這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實現(xiàn)方式,在項目中我們可能會碰到導(dǎo)出Excel文件的需求,文中給出了詳細的代碼示例,需要的朋友可以參考下
    2023-08-08
  • 對vue v-if v-else-if v-else 的簡單使用詳解

    對vue v-if v-else-if v-else 的簡單使用詳解

    今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 將VUE項目部署到服務(wù)器的詳細步驟

    將VUE項目部署到服務(wù)器的詳細步驟

    經(jīng)過一段時間的探索,前端后端都有大致的樣子了,下面就是部署到服務(wù)器,這篇文章主要給大家介紹了關(guān)于將VUE項目部署到服務(wù)器的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • vue + element動態(tài)多表頭與動態(tài)插槽

    vue + element動態(tài)多表頭與動態(tài)插槽

    這篇文章主要介紹了vue + element動態(tài)多表頭與動態(tài)插槽,下面文章圍繞vue + element動態(tài)多表頭與動態(tài)插槽的相關(guān)資料展開文章的內(nèi)容,具有一定的參考價值,需要的小伙伴可以參考一下,希望對大家有所幫助
    2021-12-12
  • Vue.js第二天學習筆記(vue-router)

    Vue.js第二天學習筆記(vue-router)

    這篇文章主要為大家詳細介紹了Vue.js第二天的學習筆記,關(guān)于vue-router的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)

    Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)

    Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應(yīng)用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-01-01

最新評論