如何将React Native连接至现有PHP+MySQL项目（主机不支持Node.js）

你现有服务端已经运行了PHP环境，完全不需要依赖Node.js/Express技术栈，直接在现有PHP站点上新增API接口层即可实现和React Native的GET、POST数据交互，具体落地步骤如下：

1. 服务端编写PHP API接口 #

在你的站点根目录下新建单独的api文件夹统一存放接口文件，每个接口对应一类业务操作，比如get_article_list.php、submit_user_info.php。
每个接口文件开头需要统一做跨域、返回格式配置，避免React Native端请求报错：

<?php
// 调试阶段可设置为*，上线后建议替换为严格的请求来源限制
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Content-Type: application/json; charset=utf-8");

// 直接放行OPTIONS预检请求
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}

配置完成后即可编写业务逻辑，参数获取、数据库操作参考示例：

// 接收GET参数
$type = isset($_GET['type']) ? intval($_GET['type']) : 1;

// 接收JSON格式POST参数
$postData = json_decode(file_get_contents('php://input'), true);
$username = isset($postData['username']) ? trim($postData['username']) : '';

// 参数校验
if (empty($username)) {
    echo json_encode([
        'code' => 400,
        'msg' => '参数缺失',
        'data' => null
    ]);
    exit;
}

// 数据库操作建议用PDO预处理语句，避免SQL注入
// 业务逻辑处理完成后统一返回JSON格式结果

接口写完后可先用Postman或者浏览器访问测试，比如你的接口地址为https://kasumushi.com/api/get_article_list.php，确认返回格式符合预期后再对接前端。

2. React Native 侧调用接口 #

直接用RN内置的fetchAPI即可发起请求，参考示例：

GET请求示例 #

fetch('https://kasumushi.com/api/get_article_list.php?type=1')
  .then(response => response.json())
  .then(res => {
    // 处理返回的业务数据
    console.log('接口返回结果', res)
  })
  .catch(err => {
    console.error('请求报错', err)
  })

POST请求示例 #

fetch('https://kasumushi.com/api/submit_user_info.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'test_user',
    age: 20
  })
})
.then(response => response.json())
.then(res => {
  console.log('提交结果', res)
})
.catch(err => {
  console.error('提交报错', err)
})

注意事项 #

• 所有数据库操作必须使用预处理语句，禁止直接拼接SQL，避免SQL注入漏洞
• 敏感业务接口建议增加签名校验，请求时携带加密签名，服务端校验通过后再执行业务逻辑，防止接口被恶意调用
• 上线后将跨域头的*替换为严格的限制规则，降低安全风险
• 如果手机端调试时出现网络错误，优先检查手机是否能正常访问你的站点域名，再确认接口跨域头配置是否正确

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