跨域报错（CORS error）：为什么不能直接在前端 Vue/React 中直连 API

在前端写 Fetch 访问 API 报跨域被拦截？深度科普浏览器同源策略与 API Key 前端明文泄露的巨大风险，指导搭建极简后端中转层。

一、为什么 Google 官方接口直接禁止前端跨域？

很多新手在 Vue 或 React 组件中直接写 fetch('https://generativelanguage...')，控制台立刻被红色的 Access-Control-Allow-Origin 跨域错误刷屏。
这是谷歌出于安全考虑刻意为之的防御设计！
如果在前端 JavaScript 中直接调用，任何访客只需按下 F12 就能直接从源码中提取你的 API Key 去肆无忌惮地盗刷。

二、标准开发范式

必须在 Node.js、Next.js API Routes、FastAPI 等后端编写一个轻量接口，在后端安全环境中读取环境变量并请求谷歌，前端仅与你自己的后端服务器通信。