React 中使用 fetch 请求外部 API 时页面空白，通常因 CORS 跨域限制导致响应未成功解析，需通过代理、服务端中转或选择支持 CORS 的 API 解决。
react 中使用 `fetch` 请求外部 api 时页面空白，通常因 cors 跨域限制导致响应未成功解析，需通过代理、服务端中转或选择支持 cors 的 api 解决。
在你的代码中，fetch('https://zenquotes.io/api/random') 看似逻辑正确：使用 useEffect 在组件挂载后发起请求，通过 useState 存储并渲染结果。但实际页面为空，且控制台很可能报出类似 Blocked by CORS policy 的错误——这正是问题的核心。
CORS（跨源资源共享）是浏览器强制执行的安全机制：当 React 开发服务器（如 http://localhost:3000）尝试直接向 https://zenquotes.io 发起请求时，若该 API 未在响应头中明确声明允许你的源（Access-Control-Allow-Origin: http://localhost:3000），浏览器将拦截响应体，导致 .json() 解析失败，setQuote 不会被调用，quote 始终为 null，最终 <main>{quote}</main> 渲染为空白。
✅ 验证方式：打开浏览器开发者工具 → Network 标签页 → 找到该请求 → 查看 Response 或 Preview 标签是否为空，并检查 Headers 中是否存在 Access-Control-Allow-Origin 字段。
? 可行解决方案：
-
优先使用已支持 CORS 的 API 端点
ZenQuotes 实际提供了带 CORS 支持的备用域名：fetch('https://api.zenquotes.io/v1/quotes/random')✅ 该地址默认允许前端直连（返回头含 Access-Control-Allow-Origin: *），可直接替换原 URL。
-
配置开发代理（推荐用于本地开发）
在 package.json 中添加："proxy": "https://api.zenquotes.io"
然后修改请求为相对路径：
fetch('/v1/quotes/random') // 自动代理到 https://api.zenquotes.io/v1/quotes/random⚠️ 注意：此方式仅在开发环境（npm start）生效，构建生产版（npm run build）后需由 Nginx/Apache 等反向代理配合。
服务端中转（适用于生产环境或复杂场景）
创建一个 Express 路由（如 /api/quote），在服务端发起请求并转发响应，规避浏览器 CORS 限制。
? 额外优化建议：
-
避免直接渲染 quote 对象（JSX 中对象不可渲染），应提取字段：
{quote ? <p>{quote.q} — {quote.a}</p> : <p>Loading...</p>} -
添加加载态与错误处理：
const [quote, setQuote] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); fetch('https://api.zenquotes.io/v1/quotes/random') .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}`); return res.json(); }) .then(data => setQuote(data[0])) .catch(err => setError(err.message)) .finally(() => setLoading(false)); }, []); if (loading) return <main><p>Loading...</p></main>; if (error) return <main><p>Error: {error}</p></main>; return <main><p>{quote?.q} — {quote?.a}</p></main>;
总结：前端无法绕过浏览器 CORS 策略，关键在于选择兼容的 API 地址或借助代理层。优先尝试 https://api.zenquotes.io/v1/quotes/random，它专为前端直连设计，无需额外配置即可正常工作。
