快捷導(dǎo)航

VUE項(xiàng)目IIS部署使用nginx代理訪問(wèn)后端接口方式

更新時(shí)間：2025年12月25日 09:15:37 作者：-清歡有味

文章瀏覽閱讀704次。文章講述了項(xiàng)目使用vue-element-admin遇到的跨域問(wèn)題，嘗試了瀏覽器JS、打包路徑、路由模式和IIS代理等方法均無(wú)效，最終通過(guò)配置Nginx進(jìn)行后端接口代理解決了問(wèn)題，同時(shí)提供了參考文檔鏈接。

VUE IIS部署使用nginx代理訪問(wèn)后端接口

項(xiàng)目使用 vue-element-admin 方案，采用History模式打包后部署在IIS，在訪問(wèn)接口時(shí)狀態(tài)返回200，但是響應(yīng)提示

We're sorry but Vue Admin Template doesn't work properly without JavaScript enabled. Please enable it to continue.

搜索發(fā)現(xiàn)可能的原因

1.瀏覽器JS未啟用

2.vue項(xiàng)目打包路徑有問(wèn)題

3.vue路由模式需要改成hash模式

4.接口代理問(wèn)題

已經(jīng)嘗試方法

瀏覽器JS已經(jīng)啟用，

嘗試修改publicPath 從 "./" "/" "/xx/" 都無(wú)法解決這個(gè)問(wèn)題

嘗試將vue路由模式由history修改為hash模式也無(wú)法正常訪問(wèn)接口

嘗試使用IIS 的ARR代理接口，仍無(wú)法解決（這個(gè)方法可能是我沒(méi)有弄明白）

最終解決辦法

使用nginx代理后端接口，配置如下

    server {
        listen 8888;
        server_name localhost;
        location / {
            #try_files $uri $uri/  /index.html;  # 解決頁(yè)面刷新
            proxy_pass http://200.200.200.200:200; #web在IIS的部署地址
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location /api1{
            rewrite  ^/api1/(.*)$ /$1 break;
            proxy_pass http://100.100.100.100:100;#api1的后端接口地址
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location /api2{
            rewrite  ^/api2/(.*)$ /$1 break;
            proxy_pass https://xxxx.xxxxx.com; #api2的后端接口地址
            proxy_pass_header X-Accel-Buffering;            
            proxy_read_timeout 1800s;
            proxy_set_header Origanization-Id qiancheng;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host xxxx.xxxxx.com;
            #不加下面這些 在https 報(bào)403錯(cuò)誤
            proxy_ssl_server_name on; 
            proxy_ssl_name xxxx.xxxxx.com;

        }

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單
這篇文章主要為大家詳細(xì)介紹了vue在table表中懸浮顯示數(shù)據(jù)及右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue中如何定義數(shù)據(jù)示例詳解
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-09-09
使用Vue寫(xiě)一個(gè)datepicker的示例
這篇文章主要介紹了使用Vue寫(xiě)一個(gè)datepicker的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能
這篇文章主要介紹了vue實(shí)現(xiàn)右鍵點(diǎn)擊彈框信息功能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12
Vue3使用Lottie實(shí)現(xiàn)一個(gè)簡(jiǎn)單的加載動(dòng)畫(huà)
Lottie 是一個(gè)流行的動(dòng)畫(huà)庫(kù),它允許我們使用 JSON 文件來(lái)渲染高質(zhì)量的動(dòng)畫(huà),本文將介紹一下如何在Vue3中集成 Lottie 動(dòng)畫(huà)實(shí)現(xiàn)一個(gè)加載動(dòng)畫(huà)效果,需要的可以了解下
2025-02-02
淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求
這篇文章主要介紹了淺談在Vue-cli里基于axios封裝復(fù)用請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Vue.js常用指令匯總（v-if、v-for等）
這篇文章主要為大家詳細(xì)匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
Vue 動(dòng)態(tài)添加表單實(shí)現(xiàn)動(dòng)態(tài)雙向綁定
動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,本文詳細(xì)介紹了Vue.js中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-12-12
axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata
今天小編就為大家分享一篇axios 實(shí)現(xiàn)post請(qǐng)求時(shí)把對(duì)象obj數(shù)據(jù)轉(zhuǎn)為formdata，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
解決keep-alive同一個(gè)組件不緩存問(wèn)題
這篇文章給大家介紹了如何解決keep-alive同一個(gè)組件不緩存問(wèn)題,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-02-02