如何在React JS项目中连接SQL Server数据库并对接PHP配置文件

React作为前端框架运行在用户浏览器端，无法直接调用PHP文件或访问SQL Server数据库。你需要将PHP侧封装为HTTP API接口，React通过HTTP请求工具调用接口完成数据交互即可。

你已有的dbConfig.php只需保证已经正确配置SQL Server连接参数（主机地址、端口、库名、账号、密码）、可正常建立数据库连接即可，示例内容参考：

// dbConfig.php 参考实现
<?php
$serverName = "SQL Server地址,端口";
$connectionOptions = array(
    "Database" => "数据库名",
    "Uid" => "登录账号",
    "PWD" => "登录密码"
);
$conn = sqlsrv_connect($serverName, $connectionOptions);
if(!$conn) {
    die(print_r(sqlsrv_errors(), true));
}
?>

接下来新建独立的PHP接口文件，比如api/getData.php，引入dbConfig.php后处理请求、返回JSON格式数据：

// api/getData.php 接口示例
<?php
// 本地开发阶段配置跨域头，生产环境请替换*为你的前端正式域名
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

// 引入数据库配置
require_once '../dbConfig.php';

// 示例：查询目标表数据
$sql = "SELECT * FROM 你的业务表名";
$stmt = sqlsrv_query($conn, $sql);
if($stmt === false) {
    die(json_encode(array("status" => "error", "msg" => sqlsrv_errors())));
}

$data = array();
while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
    $data[] = $row;
}

// 返回JSON结果
echo json_encode(array("status" => "success", "data" => $data));

// 释放连接
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn);
?>

写完后将PHP项目部署到本地服务环境（如XAMPP、WAMP），假设本地PHP服务运行在http://localhost:8000，则上述接口的访问地址为http://localhost:8000/api/getData.php，可直接在浏览器访问该地址，确认能正常返回JSON数据后再进行React侧开发。

React侧不需要配置任何数据库、PHP相关参数，直接调用上述PHP接口即可，两种常用实现方式：

原生fetch实现（无需额外依赖） #

import { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:8000/api/getData.php')
      .then(res => res.json())
      .then(res => {
        if (res.status === 'success') {
          setData(res.data);
        } else {
          console.error('请求失败', res.msg);
        }
        setLoading(false);
      })
      .catch(err => {
        console.error('接口请求错误', err);
        setLoading(false);
      })
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div>
      <h1>从SQL Server获取的数据</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.你要展示的字段名}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

axios实现（需先安装依赖） #

先执行安装命令：npm install axios
组件调用逻辑：

import { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get('http://localhost:8000/api/getData.php')
      .then(res => {
        if (res.data.status === 'success') {
          setData(res.data.data);
        }
      })
      .catch(err => console.error('请求错误', err))
      .finally(() => setLoading(false));
  }, []);

  // 渲染逻辑和上方fetch实现一致
}

• 本地开发如果出现跨域报错，确认PHP接口的跨域头已经正确配置
• 生产环境禁止将Access-Control-Allow-Origin设为*，需替换为你的前端正式域名
• dbConfig.php不要放在Web服务的可公开访问目录下，避免数据库配置泄露
• 涉及增删改操作的接口必须做参数校验、权限验证，避免SQL注入风险

内容的提问来源于stack exchange，提问作者Kruno Žagar