今天在本地开发环境联调前后端时,发现前端 web 页面怎么也连不上后端接口,发送不了请求。
搜索了一圈,发现原因是浏览器禁止某些端口的访问,测试用的 6000 端口刚好属于其中之一。
环境说明
前端基于 ant 框架实现, npm start
后监听 localhost:8000
。
后端由 Flask 开发,debug 模式启动,监听 localhost:6000
。
前端页面请求后端时,直接发送请求到 http://localhost:6000
接口。
用火狐打开 http://localhost:8000,发现前端连不上后端,浏览器开发工具中的 Network 一直没有出现 localhost:6000 的请求。
尝试解决
初次实验
-
把前端配置中随机改个端口号,比如
6001
,发现在 Network 中有了localhost:6001
请求数据,说明换端口后可以正常创建连接 -
把后端启动地址改成
localhost:5000
,前端代码中把请求端口改成5000
,发现这时可以正常发送接口也有数据。
通过以上两个测试,初步判断错误是由于 6000
端口造成的,换用其他端口就能访问。
可是到这也没有弄清楚究竟是什么原因导致 6000
端口不能访问。
浏览器提供新线索
之后把端口换回 6000,尝试换用 Chrome 访问页面,这时在控制台出现一条报错信息: net::ERR_UNSAFE_PORT
:
根据报错信息,找到这条回答,原来浏览器默认把一些端口认为是 「不安全端口」,因为这些端口号已经被其他服务使用,可能出现跨协议脚本攻击(Cross-Protocol Scripting)。
Chrome 禁止的端口列表,参考源码链接:
|
|
火狐中禁止使用的端口,详细信息参考链接:
|
|
解决方案
开发环境中把后端接口换为没有被禁止访问的接口就行。
生产环境中不会直接访问后端应用,通过 nginx 反代,一般用的也是 80、443 端口。
总结
很不走运,随便挑的 6000 端口在被禁止的端口之列,这才导致从浏览器没法连接后端。
刚开始用火狐时也一直没找到原因,后来换 Chrome 才发现有用的报错信息,前端出问题换一换不同的浏览器,往往有惊喜。
最后,开发测试环境选择端口的时候,还是选择大家约定俗成的端口比较好,比如 8000,8080,8888 等。