如何通过浏览器端原生JS直接连接远程Postgres数据库？

浏览器端不可能用原生fetch直接连接远程PostgreSQL数据库，这和身份凭证的传递位置没有任何关系，是协议与安全模型层面的本质限制。

你的三次尝试报错的原因 #

• 调用fetch("postgres://...")报URL scheme "postgres" is not supported：fetch是专门为HTTP协议设计的客户端，原生仅支持http、https等标准Web协议，完全不识别PostgreSQL自有的二进制通信协议，自然无法处理postgres开头的连接串。
• 用http://加5432端口访问报net::ERR_EMPTY_RESPONSE、用https://加5432端口访问报net::ERR_CONNECTION_CLOSED：PostgreSQL的5432默认端口运行的是专属TCP协议，既不会解析HTTP请求格式，也不支持HTTPS的TLS握手流程，你发过去的HTTP请求对它来说是无法识别的无效数据，要么直接断开连接，要么返回不了符合HTTP规范的响应，就会触发这类网络错误。

为什么浏览器直连数据库走不通 #

1. 能力限制：普通网页的JS运行环境没有开放原始TCP Socket权限，fetch、XMLHttpRequest这类内置请求API只能发送HTTP协议请求，根本构造不出PostgreSQL能识别的协议报文。就算用WebAssembly实现PostgreSQL协议解析，浏览器的跨域安全策略也会拦截请求——远程PostgreSQL服务不可能返回允许跨域访问的CORS响应头，请求在浏览器层就会被拦下。
2. 安全风险：如果真的能实现前端直连，你必须把数据库账号、密码、连接地址明文写在前端代码里，任何访问页面的用户打开控制台就能拿到完整数据库权限，可以任意拖库、删改数据，完全没有安全边界。
3. 设计定位问题：PostgreSQL本身是面向可信服务端环境设计的，没有针对公网不可信用户的访问控制、参数校验、流量拦截能力，直接暴露给前端调用会留下极大的攻击面。

可行的实现方案 #

• 生产环境唯一推荐方案：部署极薄的一层后端服务（哪怕是只有几行代码的Serverless函数都可以），把数据库连接逻辑放在服务端，前端只通过HTTP接口和后端交互，由后端完成权限校验、参数过滤后再操作数据库。
• 本地调试、内部工具类场景：可以用基于WebAssembly打包的浏览器端PostgreSQL客户端，但依然需要搭一层反向代理解决跨域问题，代理层负责把前端的请求转发给数据库实例，本质上还是没有绕过中间服务。
• 不要尝试修改数据库配置让它支持HTTP、CORS这类需求，PostgreSQL本身没有相关配置项，强行修改端口或暴露服务只会把数据库完全置于公网攻击风险下。

内容的提问来源于stack exchange，提问作者Jordan Barrett