起因

项目中后端给到了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 // 实际请求