前端请求浏览器提示net::ERR_UNSAFE_PORT的解决方案
起因
项目中后端给到了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 // 实际请求