解决ReactJS无法获取PHP JSON数据的问题：Axios集成指南

<?php
  // 允许来自特定源的跨域请求。这里假设React应用运行在 http://localhost:3000
  header('Access-Control-Allow-Origin: http://localhost:3000');
  // 允许的HTTP方法，例如GET, POST, PUT, DELETE
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  // 允许的请求头
  header('Access-Control-Allow-Headers: Content-Type, Authorization');
  // 允许携带凭证（如cookies, HTTP认证及客户端SSL证明）
  header('Access-Control-Allow-Credentials: true');
  // 设置响应内容类型为JSON
  header('Content-Type: application/json');

  // 处理预检请求 (OPTIONS)
  if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
      exit(0);
  }

  // 定义一个简单的产品类
  class Furniture {
      public $name;
      public $price;
      public $dimensions;

      public function set_name($name) { $this->name = $name; }
      public function set_price($price) { $this->price = $price; }
      public function set_dimensions($dimensions) { $this->dimensions = $dimensions; }
  }

  // 创建一个产品实例并设置属性
  $product = new Furniture();
  $product->set_name('现代简约沙发');
  $product->set_price('$499');
  $product->set_dimensions('200x90x80cm');

  // 将产品对象编码为JSON字符串
  $myJSON = json_encode($product);

  // 输出JSON数据
  echo $myJSON;
?>

npm install axios
# 或者
yarn add axios

import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 导入axios库
import './App.css'; // 假设有相关的CSS文件

function App() {
  // 使用useState钩子来存储从后端获取的数据
  const [data, setData] = useState(null); // 初始化为null，表示数据尚未加载

  // useEffect钩子用于在组件挂载后执行副作用，例如数据请求
  useEffect(() => {
    const fetchAPI = async () => {
      try {
        const url = 'http://localhost:8000/server.php'; // PHP后端服务的URL
        // 使用axios.get发起GET请求
        const response = await axios.get(url);
        // axios会自动解析JSON响应，数据在response.data中
        setData(response.data);
      } catch (error) {
        // 捕获并处理请求过程中可能发生的错误
        console.error('获取数据失败:', error);
        // 在UI中显示错误信息或采取其他错误处理措施
      }
    };

    fetchAPI(); // 调用数据请求函数
  }, []); // 空数组作为依赖项，确保useEffect只在组件挂载时执行一次

  return (
    <div className="App">
      <h1>产品信息展示</h1>
      {data ? ( // 根据data是否存在来条件渲染内容
        <div>
          <p><strong>产品名称:</strong> {data.name}</p>
          <p><strong>产品价格:</strong> {data.price}</p>
          <p><strong>产品尺寸:</strong> {data.dimensions}</p>
        </div>
      ) : (
        <p>数据加载中...</p> // 数据未加载时显示加载提示
      )}
    </div>
  );
}

export default App;