如何用Create React App从Apache服务器读取静态JSON文件

1. 确保Apache上的JSON文件可正常访问 #

把条款JSON文件（比如terms.json）放到Apache的静态资源目录下（例如/var/www/html/static/），然后在浏览器直接访问http://你的Apache域名/static/terms.json，确认能正常返回JSON内容。如果访问失败，检查Apache的文件权限和目录访问规则，确保该文件允许GET请求。

2. 在React条款组件中获取并渲染内容 #

在你的条款页面组件（比如TermsPage.js）里，用原生fetch API获取数据，同时处理加载、成功、失败三种状态：

import { useState, useEffect } from 'react';

function TermsPage() {
  const [termsContent, setTermsContent] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchTerms = async () => {
      try {
        // 替换为你的Apache服务器上JSON文件的实际URL
        const response = await fetch('http://你的Apache域名/static/terms.json');
        if (!response.ok) {
          throw new Error(`请求失败: ${response.status}`);
        }
        const data = await response.json();
        setTermsContent(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchTerms();
  }, []);

  if (loading) return <div>加载条款中...</div>;
  if (error) return <div>加载条款失败: {error}</div>;

  return (
    <div className="terms-page">
      {/* 页面骨架：导航栏、Logo等 */}
      <header>
        <h1>服务条款</h1>
        {/* 这里插入你的导航栏组件 */}
      </header>
      <main>
        {/* 渲染JSON内容，假设JSON结构为{title: "", content: ""} */}
        <h2>{termsContent.title}</h2>
        {/* 如果content是HTML格式，用dangerouslySetInnerHTML渲染；纯文本直接用{termsContent.content} */}
        <div dangerouslySetInnerHTML={{ __html: termsContent.content }} />
      </main>
    </div>
  );
}

export default TermsPage;

3. 处理开发环境的跨域问题 #

如果React开发服务器（默认3000端口）和Apache服务器不在同一域名/端口，会触发跨域拦截，可通过以下两种方式解决：

方法一：在package.json中配置代理 #

在Create React App的package.json里添加proxy字段，指向你的Apache服务器地址：

{
  "name": "your-react-app",
  "proxy": "http://你的Apache域名",
  // 其他配置项...
}

之后组件里的请求可以改用相对路径：

const response = await fetch('/static/terms.json');

注意：该方案仅适用于开发环境。

方法二：在Apache上配置CORS #

在Apache的配置文件（如httpd.conf或.htaccess）中添加CORS规则，允许React开发服务器的域名访问：

Header set Access-Control-Allow-Origin "http://localhost:3000"
Header set Access-Control-Allow-Methods "GET"

生产环境不建议用*代替具体域名，避免安全风险。

4. 生产部署注意事项 #

当你执行npm run build打包React应用后：

• 如果React应用和JSON文件部署在同一Apache服务器，直接用相对路径请求即可，无跨域问题。
• 如果部署在不同服务器，确保目标Apache服务器的CORS配置允许React应用的域名访问。

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