前端请求浏览器提示net::ERR_UNSAFE_PORT的解决方案

起因

项目中后端给到了6666端口的服务地址, 随即前端项目访问中浏览器报错如下:

不安全端口在主流浏览器（Chrome/Firefox/Edge/Safari）中会被拦截，触发浏览器Network的status列显示 net::ERR_UNSAFE_PORT 错误, 以下是常见的不安全端口一览表:

​因为设计之初是防止恶意网页通过浏览器直接访问敏感服务（如数据库、邮件服务器）, 所以我们在使用中需要避开这些特定端口.

解决方案(推荐)

后端把端口修改成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 // 实际请求