Front连接云服务器数据库的核心路径是：通过后端接口间接访问，或使用数据库客户端直连，前者是生产环境的标准方案，后者适合开发调试。不论选择哪种方式，都绕不开三个关键环节：数据库的访问授权配置、云服务器安全组的端口放行，以及连接串的准确编写,下面直接拆解具体操作。
搞清Front连接数据库的两种路径
很多刚接触云开发的朋友容易陷入一个误区，以为前端页面能直接连数据库，浏览器里运行的JavaScript代码没有权限直接操作云数据库，这是安全机制决定的，行业共识认为,前端必须通过后端服务完成数据交互。
通过后端接口间接连接
这是生产环境唯一推荐的方式，整体链路是：Front页面发起请求 → 后端接口接收并处理 → 后端连接数据库执行操作 → 返回结果给Front。
这套方案的优势很突出：数据库账号密码只存在于服务端环境变量中，前端代码里看不到任何敏感信息；同时可以在后端做权限校验、参数过滤,防止SQL注入等恶意攻击。
使用数据库客户端直连
本地开发调试时，可以直接用Navicat、DBeaver这类图形化工具连接云数据库，方便查看表结构和测试SQL语句，但这只是开发辅助手段,不能写进Front代码里。
一句话总结：Front本身不直连数据库，要么走后端API，要么用客户端工具连，明白这个前提,后面所有配置步骤才有意义。
云服务器数据库连接前的必要准备
实际动手前，先把基础环境理清楚，这里涉及数据库类型选择、服务器配置核对、连接信息收集三件事。
数据库类型决定连接方式
不同的数据库，连接串格式和驱动完全不同,最常见的搭配是：
- MySQL：使用
mysql2驱动，连接串格式为mysql://用户名:密码@主机地址:端口/数据库名 - PostgreSQL：使用
pg驱动，连接串格式为postgresql://用户名:密码@主机地址:端口/数据库名 - MongoDB：使用
mongoose或官方驱动，连接串格式为mongodb://用户名:密码@主机地址:端口/数据库名
如果你用的是云厂商提供的托管数据库（比如简米云RDS、酷番云TDSQL），控制台会直接给出完整的连接串示例，复制即可,自建数据库则需要自己拼写。
安全组配置是连接成败的关键
云服务器的防火墙分为两层：系统防火墙（如firewalld、iptables）和云控制台的安全组规则。大多数连接失败案例，都是安全组没放行对应端口导致的。
以简米云ECS为例，操作路径是：ECS控制台 → 实例列表 → 更多 → 网络和安全组 → 安全组配置 → 入方向规则 → 手动添加。
需要放行的端口取决于数据库类型：
| 数据库类型 | 默认端口 | 放行建议 |
|---|---|---|
| MySQL | 3306 | 仅放行你的办公IP，不要用0.0.0.0/0 |
| PostgreSQL | 5432 | 仅放行你的办公IP |
| Redis | 6379 | 仅放行内网或指定IP |
| MongoDB | 27017 | 仅放行你的办公IP |
安全组配置完，还要确认云服务器内部的防火墙没有拦截，以CentOS系统为例,执行以下命令放行端口：
# 查看防火墙状态 systemctl status firewalld # 永久放行MySQL端口 firewall-cmd --zone=public --add-port=3306/tcp --permanent # 重新加载防火墙配置 firewall-cmd --reload
数据库本身也要授权远程访问,MySQL中执行：
-- 创建用户并允许从任意主机连接 CREATE USER 'front_user'@'%' IDENTIFIED BY '你的强密码'; -- 授予指定数据库的全部权限 GRANT ALL PRIVILEGES ON your_database. TO 'front_user'@'%'; -- 刷新权限 FLUSH PRIVILEGES;
这里有个细节：'front_user'@'%'中的代表允许从任意IP连接，如果出于安全考虑只允许某台服务器连接,把换成那台服务器的内网IP即可。
在Front项目中配置数据库连接
搞定服务器端的准备，接下来就是代码层面的配置，这里分两种情况：使用后端框架连接,以及前端环境变量的配置。
后端服务中的连接配置
如果你的Front项目搭配了Node.js后端（Express或Koa框架），安装对应驱动后,创建数据库连接池：
// 使用mysql2创建连接池
const mysql = require('mysql2/promise');
const pool = mysql.createPool({
host: process.env.DB_HOST, // 云服务器公网IP或内网地址
user: process.env.DB_USER, // 数据库用户名
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME,
port: process.env.DB_PORT || 3306,
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0
});
module.exports = pool;
在路由中使用连接池查询数据：
const express = require('express');
const router = express.Router();
const pool = require('../db');
router.get('/users', async (req, res) => {
try {
const [rows] = await pool.query('SELECT FROM users');
res.json({ code: 0, data: rows });
} catch (error) {
res.status(500).json({ code: 1, message: '数据库查询失败' });
}
});
这里必须用环境变量存储敏感信息，直接硬编码密码是新手最容易犯的错误，在项目根目录创建.env文件：
DB_HOST=你的云服务器公网IP
DB_USER=front_user
DB_PASSWORD=你的强密码
DB_NAME=your_database
DB_PORT=3306安装dotenv依赖并在入口文件顶部引入：
npm install dotenv
require('dotenv').config();
Front页面中调用后端接口
前端代码只做一件事：通过HTTP请求调用后端接口，以Vue 3项目为例,使用axios封装请求：
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'http://你的后端域名或IP:端口/api',
timeout: 10000
});
// 在组件中调用用户列表接口
async function fetchUsers() {
const response = await apiClient.get('/users');
return response.data.data;
}
这里容易踩一个坑：跨域问题，如果前端和后端不在同一个域名下，浏览器会拦截请求,解决方案是后端配置CORS中间件：
const cors = require('cors');
app.use(cors({
origin: ['http://localhost:5173', 'https://你的前端域名'],
methods: ['GET', 'POST', 'PUT', 'DELETE']
}));
云服务器连接数据库常见问题排查
连接失败时，按照下面的顺序逐一排查,能省下大量时间。
超时连接不上怎么办
先检查网络连通性,本地终端执行：
telnet 你的云服务器公网IP 3306
如果提示连接超时，重点检查安全组入方向规则、服务器防火墙状态、数据库服务是否正常启动，如果提示连接被拒绝，说明数据库配置的bind-address限制了访问地址,需要修改MySQL配置文件：
# 修改 /etc/my.cnf 或 /etc/mysql/mysql.conf.d/mysqld.cnf bind-address = 0.0.0.0
修改后重启MySQL服务：
systemctl restart mysqld
云服务器数据库连接不上且报错Access denied
这个错误说明网络通了，但认证失败，依次确认：用户名是否存在、密码是否正确、该用户是否授权了对应数据库的远程访问权限、mysql_native_password插件是否兼容，MySQL 8.0默认使用caching_sha2_password插件，部分旧客户端不支持,需要切换认证插件：
ALTER USER 'front_user'@'%' IDENTIFIED WITH mysql_native_password BY '你的强密码'; FLUSH PRIVILEGES;
简米云ECS连接MySQL数据库很慢
连接慢通常和DNS反向解析有关，在MySQL配置文件的[mysqld]段添加：
skip-name-resolve
跳过域名解析，直接使用IP连接，速度会明显提升，注意开启该参数后，授权表里的host字段必须使用IP地址,不能再使用主机名。
数据库连接的安全加固建议
连接打通只是第一步，生产环境中必须做好安全防护，以下几个措施属于基础配置,不可跳过。
最小权限原则
多数情况下，业务账号只需要增删改查权限，不需要授权管理类权限，前面示例中的GRANT ALL PRIVILEGES适用于开发环境,生产环境建议按需授权：
-- 只授予查询、插入、更新、删除权限 GRANT SELECT, INSERT, UPDATE, DELETE ON your_database. TO 'front_user'@'%';
连接信息加密存储
数据库密码、连接串等敏感信息，不要以明文形式提交到代码仓库，使用云厂商的密钥管理服务（如简米云KMS）或环境变量管理工具，定期轮换密码，备份数据库时,对备份文件进行加密存储。
定期更新数据库版本
不论使用哪种数据库，及时升级到官方维护的最新稳定版本，云厂商提供的托管数据库会在控制台推送版本更新，自建数据库需要手动关注官方发布公告，据工信部相关安全通报，数据库漏洞是Web应用被入侵的主要途径之一,及时打补丁能挡住绝大多数已知攻击。
常见问题解答
云服务器连接远程数据库需要开启什么端口
需要开启数据库对应的默认端口，MySQL是3306，PostgreSQL是5432，Redis是6379，MongoDB是27017，在云控制台安全组和服务器防火墙两层都要放行，且建议只对特定IP开放,不要直接暴露到公网。
本地Navicat连接云服务器数据库失败怎么排查
按顺序检查：云安全组入方向是否放行数据库端口、服务器防火墙是否放行、数据库bind-address是否设置为0.0.0.0、数据库用户是否允许远程连接、账号密码是否正确，用telnet命令先确认端口连通性,能快速缩小问题范围。
Front项目部署到服务器后数据库连接串应该怎么改
部署到服务器后，推荐将数据库地址改为云数据库的内网地址，同一地域的云服务器和云数据库之间走内网链路，速度更快且不占用公网带宽，同时把环境变量分发到服务器上,不要在代码里硬编码任何连接信息。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/front%e6%80%8e%e4%b9%88%e8%bf%9e%e6%8e%a5%e4%ba%91%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%95%b0%e6%8d%ae%e5%ba%93%ef%bc%9f%e6%9c%89%e5%93%aa%e4%ba%9b%e8%bf%9e%e6%8e%a5%e6%96%b9%e6%b3%95/
