??博主：小貓娃來(lái)啦
??文章核心：前端常見的HTTP異常狀態(tài)碼以及正反向代理配置

前端常見的HTTP異常狀態(tài)碼

404 - 未找到資源

當(dāng)客戶端發(fā)送了一個(gè)請(qǐng)求，但服務(wù)器無(wú)法找到對(duì)應(yīng)的資源時(shí)，會(huì)返回404錯(cuò)誤碼。可能的原因包括：

• 請(qǐng)求的URL路徑錯(cuò)誤，服務(wù)器沒有對(duì)應(yīng)的資源。
• 資源被刪除或者被移動(dòng)到其他位置。
• 資源名稱拼寫錯(cuò)誤。

403 - 禁止訪問(wèn)

當(dāng)服務(wù)器收到請(qǐng)求，但拒絕提供對(duì)應(yīng)的資源時(shí)，會(huì)返回403錯(cuò)誤碼。常見的原因有：

• 客戶端沒有經(jīng)過(guò)身份認(rèn)證或授權(quán)，無(wú)權(quán)訪問(wèn)該資源。
• 客戶端的請(qǐng)求不符合服務(wù)器的安全策略或訪問(wèn)控制規(guī)則。

304 - 未修改

這個(gè)狀態(tài)碼一般用于緩存機(jī)制中，服務(wù)器通過(guò)比較客戶端請(qǐng)求的資源的ETag或者Last-Modified字段與當(dāng)前資源的信息，判斷資源是否有更新。如果沒有更新，則返回304狀態(tài)碼，告訴客戶端直接使用緩存數(shù)據(jù)，避免重新傳輸整個(gè)資源。

500 - 服務(wù)器內(nèi)部錯(cuò)誤

當(dāng)服務(wù)器在處理請(qǐng)求時(shí)遇到了意外情況，無(wú)詳細(xì)說(shuō)明具體錯(cuò)誤原因時(shí)，會(huì)返回500錯(cuò)誤碼?？赡艿脑虬ǎ?/p>

• 服務(wù)器端代碼存在錯(cuò)誤或bug。
• 服務(wù)器配置有問(wèn)題，導(dǎo)致無(wú)法正常處理請(qǐng)求。
• 服務(wù)器資源不足或發(fā)生異常導(dǎo)致無(wú)法提供正確的響應(yīng)。

正反向代理配置

重要性

配置代理的重要性有以下幾點(diǎn)：

1. 隱私保護(hù)：使用代理可以隱藏您的真實(shí)IP地址和位置信息，保護(hù)您的隱私。代理服務(wù)器會(huì)做為中間人來(lái)轉(zhuǎn)發(fā)網(wǎng)絡(luò)請(qǐng)求，得外部網(wǎng)站只能看到代理服務(wù)器的IP地址，而不是您的真實(shí)IP地址。這對(duì)于防止身份被蹤或者避免個(gè)人信息泄露非常重要。

2. 繞過(guò)封鎖和訪問(wèn)限制：許多地區(qū)或組織會(huì)對(duì)特定的網(wǎng)站、應(yīng)用程序或內(nèi)容進(jìn)行封鎖或限制訪問(wèn)。通過(guò)使用代理服務(wù)器，可以輕松地繞過(guò)這些封鎖和限制，問(wèn)被屏蔽的內(nèi)容。

3. 加速訪問(wèn)速度：代理服務(wù)器可以緩存訪問(wèn)的網(wǎng)頁(yè)和資源，當(dāng)您再次訪問(wèn)同一網(wǎng)站時(shí)，它可以直接從緩存中提供數(shù)據(jù)，加快網(wǎng)頁(yè)加載速度。此外，如果您與代理服務(wù)器位于相同的地理位置，則可以通過(guò)連接到代理服務(wù)器來(lái)縮短網(wǎng)絡(luò)傳輸路徑，從而提高訪問(wèn)速度。

4. 安全性增強(qiáng)：代理服務(wù)器通常會(huì)提供額外的安全特性，如加密數(shù)據(jù)傳輸、防止惡意軟件和廣告攔截等。這有助于保護(hù)您的設(shè)備免受網(wǎng)絡(luò)攻擊和惡意行為的影響。

本地正向代理配置

以Vue 項(xiàng)目為例，可以在根目錄下的 vue.config.js 文件中配置代理。如果沒有該文件，可以手動(dòng)創(chuàng)建。

// vue.config.js
module = {
  devServer: {
   : {
      '/api': {
        target: 'http://api.example.com', // 要代理的目標(biāo) API 地址
        ws: true, // 是否代理 WebSockets
        changeOrigin: true, // 是否改變請(qǐng)求的源地址
        pathRewrite: {
          '^/api': '', // 將 /api 替換為空，例如 /api/user 會(huì)被代理到 http://api.example.com/user
        },
      },
    },
  },
};

以上配置中，我們?cè)O(shè)置了一個(gè)代理，將以 “/api” 開頭的請(qǐng)求轉(zhuǎn)發(fā)到 http://api.example.com。例如，api/user 會(huì)被代理到 http://api.example.com/user

• target 表示代理的目標(biāo) API 地址，這里我們假設(shè)為 http://api.example.com。
• ws 表示是否代理 WebSocket 請(qǐng)求，默認(rèn)為 false。如果需要支持 WebSocket，可以將其設(shè)為 true。
• changeOrigin 表示是否改變請(qǐng)求的源地址，默認(rèn)為 false。如果設(shè)置為 true，則請(qǐng)求頭中的 Host 會(huì)被設(shè)置為目標(biāo) URL 的主機(jī)部分。
• pathRewrite 參數(shù)是一個(gè)對(duì)象，用于重寫請(qǐng)求路徑。這里我們把請(qǐng)求路徑中的 “/api” 替換為空字符串，這樣 /api/user 就會(huì)被代理到 http://api.example.com/user`。

通過(guò)以上配置，當(dāng)我們?cè)陂_發(fā)環(huán)境下發(fā)送以 "/api "開頭的請(qǐng)求時(shí)，Vue 的開發(fā)服務(wù)器會(huì)將這些請(qǐng)求代理到目標(biāo) API 地址，從而解決跨域問(wèn)題。注意，該配置只在開發(fā)環(huán)境下生效，打包后的代碼不會(huì)包含這些代理配置。

服務(wù)器配置反向代理

以寶塔面板為例

打開自己網(wǎng)站名:


點(diǎn)擊編輯，打開高級(jí)功能，開始配置

如果還報(bào)404，記得配偽靜態(tài)

復(fù)制以下代碼到偽靜態(tài)中保存：

location ~* (runtime|application)/{
	return 403;
}
location / {
	if (!-e $request_filename){
		rewrite  ^(.*)$  /index.php?s=$1  last;   break;
	}
}

通過(guò)配置代理，解決404問(wèn)題，非常常用。

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-822754.html

到了這里，關(guān)于前端（二十六）——常見的HTTP異常狀態(tài)碼以及正反向代理配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！