VUE項目IIS部署使用nginx代理訪問后端接口方式
VUE IIS部署使用nginx代理訪問后端接口
項目使用 vue-element-admin 方案,采用History模式打包后部署在IIS,在訪問接口時狀態(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項目打包路徑有問題
3.vue路由模式需要改成hash模式
4.接口代理問題
已經(jīng)嘗試方法
瀏覽器JS已經(jīng)啟用,
嘗試修改publicPath 從 "./" "/" "/xx/" 都無法解決這個問題
嘗試將vue路由模式由history修改為hash模式也無法正常訪問接口
嘗試使用IIS 的ARR代理接口,仍無法解決(這個方法可能是我沒有弄明白)
最終解決辦法
使用nginx代理后端接口,配置如下
server {
listen 8888;
server_name localhost;
location / {
#try_files $uri $uri/ /index.html; # 解決頁面刷新
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 報403錯誤
proxy_ssl_server_name on;
proxy_ssl_name xxxx.xxxxx.com;
}總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中router-link如何添加mouseover提示
這篇文章主要介紹了Vue中router-link如何添加mouseover提示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-11-11
vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題
這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09
vue部署到線上為啥會出現(xiàn)404的原因分析及解決
這篇文章主要介紹了vue部署到線上為啥會出現(xiàn)404的原因分析及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04

