當前位置：首頁 » 數據倉庫 » js前端代理是怎麼配置的
擴展閱讀
提分平台的賬號密碼是什麼 2023-08-31 22:07:10
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

js前端代理是怎麼配置的

發布時間: 2022-09-07 11:42:49

1. 通俗易懂講解vue.config.js的配置參數

貼上 官網
vue-cli3 創建的時候並不會自動創建vue.config.js，因為這個是個可選項，所以一般都是需要修改webpack的時候才會自己創建一個vue.config.js
再然後因為vue-cli3內部高度集成了webpack，一般來說使用者不需要再去知道weboack做了什麼，所以沒有暴露webpack的配置文件，我們可以手動去創建vue.config.js 去修改默認的webpack。注意，只能叫vue.config.js。

publicPath （從 Vue CLI 3.3 起已棄用baseUrl，請使用publicPath）
參考： https://my.oschina.net/u/4446873/blog/4882847

默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.xxx.com/ 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.xxx.com/my-app/ ，則設置 publicPath 為 /my-app/。

這個值在開發環境下同樣生效。如果你想把 開發伺服器架設在根路徑 ，你可以使用一個條件式的值：

通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為'/'，訪問地址是你的IP地址。如下是設置成'/app'的效果：

從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。

結論： publicPath配置成'/aaa/bbb/ccc'， 則需在相應的伺服器路徑中新建aaa>bbb>ccc的文件夾，然後將打包後的文件放進去，就ok啦。

項目中，我會在.env.proction文件中設置一個變數VUE_APP_BASE_URL ，項目打包後告訴相關人員 nginx 路由前綴是什麼即可

outputDir

assetsDir

indexPath

filenameHashing

直觀效果：當運行npm run build時，
打包後的文件後面都會帶一個8位的hash值，那啥是個hash值？

在打包出來的文件名上加上文件內容的hash是目前最常見的有效使用瀏覽器長緩存的方法，js文件如果有內容更新，hash就會更新，瀏覽器請求路徑變化所以更新緩存，如果js內容不變，hash不變，直接用緩存。（這段話是從別的文章裡面參考的）。
將filenameHashing這個值設置為false試試，就不會帶那個後綴hash值。

pages

lintOnSave

runtimeCompiler

transpileDependencies

proctionSourceMap

crossorigin （不理解）

integrity

configureWebpack

chainWebpack

Css相關配置

devServer
如果你的前端應用和後端 API 伺服器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
補充知識
所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:90/index.html 不同源 埠不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
當協議、域名、埠中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域
補充知識
反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連接請求，然後將請求轉發給內部網路上的伺服器，並將伺服器上得到的結果返回給請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。客戶端無需做任何配置。
修改config/index.js /vue.config.js文件（改完之後千萬記得要重新 npm run dev）

host 將他的值修改為 0.0.0.0，代表可以訪問本機所有的IP地址，讓vue項目可通過localhost和IP同時訪問。

port 設置埠號

open 是否在第一次編譯時是自動打開瀏覽器

hot 開啟為true，啟動熱重載，自動刷新頁面

https

inline

overlay

targe 代理的伺服器，也就是api要訪問的伺服器。
changeOrigin 允許跨域， 為false時，請求頭中host仍然是瀏覽器發送過來的host;如果設置成true：發送請求頭中host會設置成target的值
ws 是否代理websocket
pathRewrite 重寫 url 的 path 部分

此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。

參考鏈接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028

這篇文章講的也很詳細 https://blog.csdn.net/guozhangqiang/article/details/87197870

2. nginx nodejs反向代理怎麼配置

1.安裝nodejs，之前就安裝了。
2.安裝nginx ，我採用的直接源碼安裝
3.進入 /usr/local/nginx/conf 目錄，在該目錄下創建include 文件下，我的配置文件就寫在這個文件夾裡面
4.進入 /usr/local/nginx/conf/include 目錄，創建 nginx.node.conf 文件，在裡面輸入如下代碼：

upstream nodejs {
server 127.0.0.1:3000;
#server 127.0.0.1:3001;
keepalive 64;
}

server {
listen 80;
server_name www.penguu.com penguu.com;
access_log /var/log/nginx/test.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Nginx-Proxy true;
proxy_set_header Connection "";
proxy_pass http://nodejs;

}

}

5.進入/usr/local/nginx/conf ，打開nginx.conf, 在http 裡面添加 include /usr/local/nginx/conf/include/*
6.重啟nginx , 輸入 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
在瀏覽器輸入penguu.com ok.

3. 如何為thinkjs靜態資源配置nginx反向代理

為了讓網站靜態資源載入更快，所以需要在VPS的nginx上配置一個反向代理來直接讓Nginx處理靜態資源，動態類的請求通過反向代理讓Node.js來處理：
?
server {
listen 80;
server_name abc.com www.abc.com;
index index.js index.html index.htm;
if ($host != 'abc.com' ) {
rewrite ^/(.*)$ http: //abc.com/$1 permanent;
}
root /www/web/myproject/public_html/www;
if ( -f $request_filename/index.html ){
rewrite (.*) $1/index.html break ;
}
if ( !-f $request_filename ){
rewrite (.*) /index.js;
}
location = /index.js {
#proxy_http_version 1.1;
proxy_set_header Connection "" ;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true ;
proxy_pass http: //127.0.0.1:8363$request_uri;
proxy_redirect off;
}
location ~ .*\.(js|css|gif|jpg|jpeg|png|bmp|swf|ico|svg|cur|ttf|woff)$ {
expires 1000d;
}
}
如果是你的項目，需要改動如下地方：
server_name abc.com www.abc.com 將abc.com www.abc.com改為項目對應的域名
root /www/web/myproject/public_html/www 配置項目的根目錄，一定要到www目錄下
proxy_pass http://127.0.0.1:8363$request_uri;將埠6666改為項目里配置的埠

4. 如何解決前端跨域問題

可以使用伺服器代理或者在後端設置允許跨域。
現在的項目一般是在後端設置允許跨域，前端在帶有允許跨域的情況下，可以像沒有跨域一樣正常訪問。
如果前端單獨發布到伺服器，也可以在伺服器是設置代理，使用代理轉發請求。

5. 如何給 NPM 設置代理

npm全稱為Node Packaged Moles。它是一個用於管理基於node.js編寫的package的命令行工具。其本身就是基於node.js寫的,這有點像gem與ruby的關系。

在我們的項目中，需要使用一些基於node.js的javascript庫文件，就需要npm對這些依賴庫進行方便的管理。由於我們的開發環境由於安全因素在訪問一些網站時需要使用代理，其中就包括npm的repositories網站，所以就需要修改npm的配置來加入代理。

下面簡要介紹下npm的配置以及如何設置代理。

npm獲取配置有6種方式，優先順序由高到底。

  • 命令行參數。--proxy http://server:port即將proxy的值設為http://server:port。

  • 環境變數。 以npm_config_為前綴的環境變數將會被認為是npm的配置屬性。如設置proxy可以加入這樣的環境變數npm_config_proxy=http://server:port。

  • 用戶配置文件。可以通過npm config get userconfig查看文件路徑。如果是mac系統的話默認路徑就是$HOME/.npmrc。

  • 全局配置文件。可以通過npm config get globalconfig查看文件路徑。mac系統的默認路徑是/usr/local/etc/npmrc。

  • 內置配置文件。安裝npm的目錄下的npmrc文件。

  • 默認配置。 npm本身有默認配置參數，如果以上5條都沒設置，則npm會使用默認配置參數。

    • 針對npm配置的命令行操作

  • npm config set <key> <value> [--global]

  • npm config get <key>

  • npm config delete <key>

  • npm config list

  • npm config edit

  • npm get <key>

  • npm set <key> <value> [--global]

    • 在設置配置屬性時屬性值默認是被存儲於用戶配置文件中，如果加上--global，則被存儲在全局配置文件中。

    如果要查看npm的所有配置屬性（包括默認配置），可以使用npm config ls -l。

    如果要查看npm的各種配置的含義，可以使用npm help config。

    為npm設置代理

  • $ npm config set proxy http://server:port$ npm config set https-proxy http://server:port

    • 如果代理需要認證的話可以這樣來設置。

  • $ npm config set proxy http://username:password@server:port$ npm config set https-proxy http://username:pawword@server:port

    • 如果代理不支持https的話需要修改npm存放package的網站地址。

  • $ npm config set registry "http://registry.npmjs.org/"

6. 用eclipse開發前端頁面html+js，並與php開發的後端進行交換，請教如何在eclipse上配置環境及伺服器

1.貌似js是所有瀏覽器都支持（可能版本及某些特性的支持不一樣），不用專門就此配置環境及伺服器（除非你想要支持java）。

2.貌似ajax前端應用的更多些，通常都是ajax發送請求到後端，再根據後端的返回數據進行響應處理，將結果呈現到瀏覽器。

3.如果後端使用php，那麼根據伺服器的不同可以選擇 wamp / lamp，主要的區別在於伺服器一個用的 IIS ，另一個用的 Apache。

搭建PHP環境，通常是 IIS (Apache) + MySQL (或其他資料庫)+PHP，你既可以分別下載並安裝這三種軟體，也可以下載網上提供的打包好的集成安裝包。

如果只是想要快速搭建PHP的支持環境，那麼，使用集成安裝包（如 XAMPP、WampServer等等），使用方便。
而如果想學習和掌握一門技術，那麼，手動下載各個部分分別安裝配置環境是必不可少的體驗。

7. vue.config.js 配置代理不生效

你的代理設置的是/api前綴的就轉發到代理伺服器上，所以在你的代碼發起請求的時候加上api,比如：this.$axios.post('/api/tcCodeSwitchid/getSwitchInfos', ...)

8. 求解答關於Vue.config.js文件的詳細配置

這里是創建代理伺服器，訪問的時候會通過代理伺服器轉發，所以就不會出現跨域問題。
這里的配置是以"/api"開頭的地址，都通過代理訪問，其他的地址則不通過代理，後面的是代理地址。

9. apache2.2 反向代理 配置css js靜態文件

1.先去掉下面兩行的注釋

LoadMole proxy_mole
moles/mod_proxy.so

LoadMole proxy_http_mole
moles/mod_proxy_http.so

2.然後在最後增加

ProxyPass /images !
ProxyPass /css !
ProxyPass /js !
ProxyPass / http://localhost:8080/這個也可以寫為：

ProxyPass
/oa
http://localhost:8080/oa
ProxyPassReverse
/oa
http://localhost:8080/oa

也可以連續增加以上兩行，就是多個tomcat啟動

ProxyPass /meb http://192.168.6.103:8081/meb
ProxyPassReverse /meb http://192.168.6.103:8081/meb

10. 求node.js搭建前端web伺服器步驟，按網上的教程，安裝完node.js就不知道怎麼搭建了，都

安裝完node.js之後，你可以考慮使用webstorm開發工具創建web項目。
比如創建express項目。自動創建基於express 的web項目。

閱讀全文

與js前端代理是怎麼配置的相關的內容

本站內容整理源於互聯網，如有問題請聯系解決。
Copyright design: www.gotrillian.com since 2022