起因

項目中后端給到了6666端口的服務地址, 隨即前端項目訪問中瀏覽器報錯如下:

不安全端口在主流瀏覽器（Chrome/Firefox/Edge/Safari）中會被攔截，觸發瀏覽器Network的status列顯示 net::ERR_UNSAFE_PORT 錯誤, 以下是常見的不安全端口一覽表:

端口范圍	常見被禁端口示例
系統保留	1, 7, 9, 11, 13, 15, 17, 19, 20, 21, 22
高危服務	23 (Telnet), 25 (SMTP), 37 (Time), 42 (DNS)
傳統協議	53 (DNS), 77 (私用), 79 (Finger), 87 (TTY)
常見被禁	666 (Doom), 6665-6669 (IRC/游戲), 1243 (攻擊工具)
其他	1524, 2049 (NFS), 6000 (X11), 6566 (惡意軟件)

?因為設計之初是防止惡意網頁通過瀏覽器直接訪問敏感服務（如數據庫、郵件服務器）, 所以我們在使用中需要避開這些特定端口.

解決方案(推薦)

后端把端口修改成8080等安全端口即可

?開發中臨時解決方案?(不推薦)：

方案一: Chrome 啟動時允許特定端口

google-chrome --explicitly-allowed-ports=6666,6667 (本文使用的端口是6666, 改成你使用的端口)

方案二: vue2項目配置代理

代理大部分是用來臨時解決跨域用的, 不巧的是也能解決不安全端口問題

// axios請求配置
axios.baseURL = ‘/dev-api’  // 當然你的項目baseURL是動態的, 在.env.development上配置, 但是最終都是賦值給請求. 因為每個人的項目都不一樣, 所以本文教程顯示是最終賦值.

// vue.config.js文件配置
module.exports = {...,devServer: {// 開發服務器配置host: "0.0.0.0", // 監聽所有網絡接口（允許通過IP訪問）port: 8080, // 定義的端口號open: true, // 啟動后自動打開瀏覽器	  // 代理配置（解決跨域問題）proxy: {"/dev-api": { // 代理前綴（前端請求需以/dev-api開頭）target: `http://192.168.xxx.xx:6666/admin`, // 實際后端地址changeOrigin: true, // 修改請求頭中的Host為目標地址（解決虛擬主機問題）secure: false, // 如果是https接口但證書不受信任，需設為false（開發環境用）// 路徑重寫規則pathRewrite: {"^/dev-api": "" // 移除實際請求路徑中的/dev-api前綴(瀏覽器看著還是有dev-api)},logLevel: "debug" // 打印詳細的代理調試日志(查看實際請求http://192.168.xxx.xx:6666/admin, 因為瀏覽器請求始終顯示的是127.0.0.1:8080/dev-api的請求地址)}},// 安全性配置disableHostCheck: true // 禁用Host頭檢查（允許任意域名/IP訪問，開發環境臨時方案）}

[HPM] Rewriting path from “/dev-api/user/create/img” to “/user/create/img” // 重寫地址
[HPM] GET /dev-api/user/create/img ~>http://192.168.xxx.xx:6666/admin // 實際請求