如何在仅使用PHP Apache服务器的情况下在浏览器中调用Google Gemini API（无需Node.js服务器）

看起来你是想直接在浏览器里用Gemini SDK，但因为用了npm包的导入语法，浏览器找不到对应的文件才报错的——毕竟浏览器不像Node.js那样能识别@google/generative-ai这种包名，它需要明确的文件路径或者可访问的CDN链接。而且你不想用Webpack打包、也不想搭Node.js服务器，那咱们换个简单的思路，直接用CDN加载兼容浏览器的SDK版本就行，我给你一步步说：

一、直接在浏览器中加载SDK（无需打包） #

你之前的问题出在import语句用了npm包名，浏览器解析不了。咱们换成CDN的ES模块链接，这样浏览器能直接拉取到SDK文件，不用本地打包。

在你的PHP文件里，把原来的脚本替换成下面这样：

<!DOCTYPE html>
<html>
<head>
    <title>Calculars Exam Helper</title>
</head>
<body>
    <!-- 用CDN引入Gemini的浏览器兼容版SDK，类型设为module -->
    <script type="module">
        // 直接从CDN导入SDK，不用本地npm包
        import { GoogleGenerativeAI } from 'https://unpkg.com/@google/generative-ai@latest/dist/index.js';

        document.addEventListener('DOMContentLoaded', async () => {
            // 这里替换成你的Google Gemini API密钥
            const API_KEY = '你的API密钥';
            const genAI = new GoogleGenerativeAI(API_KEY);
            
            // 初始化模型和聊天
            const model = genAI.getGenerativeModel({
                model: "gemini-1.5-flash",
                systemInstruction: "You are a competitive exam helper. Your name is Calculars."
            });
            
            let chat = model.startChat({
                history: []
            });

            // 给你加个测试发送消息的函数，方便你调试
            async function sendTestMessage() {
                const result = await chat.sendMessage("你好，我该怎么准备数学竞赛？");
                const responseText = await result.response.text();
                console.log("Calculars回复：", responseText);
                // 你可以在这里把回复渲染到页面上，比如插入到某个div里
            }

            // 调用测试函数（可以删掉，换成你自己的触发逻辑）
            // sendTestMessage();
        });
    </script>
</body>
</html>

这样改了之后，浏览器就能正确加载SDK模块了——因为我们用了完整的CDN文件URL，浏览器知道去哪里找资源，不会再报找不到模块的错误。

二、重要提醒：API密钥的安全问题 #

直接在浏览器里写API密钥有个大问题：任何打开你页面的用户都能在开发者工具里看到这个密钥，很容易被滥用，比如耗光你的API额度。如果你的网站是公开的，强烈建议用PHP做个代理层，把API密钥存在服务器端，浏览器只和你的PHP服务器通信，PHP再去调用Gemini API。

给你个PHP代理的简单例子：

1. 浏览器端的JS代码（不用直接调用Gemini API）：

async function sendMessageToHelper(userMessage, chatHistory = []) {
    // 发送请求到你的PHP代理脚本
    const response = await fetch('gemini-proxy.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            message: userMessage,
            history: chatHistory
        })
    });
    
    const result = await response.json();
    return result.candidates[0].content.parts[0].text;
}

2. 新建一个gemini-proxy.php文件（放在你的Apache服务器上）：

<?php
// 这里的API密钥只会在服务器端使用，不会暴露给浏览器
$API_KEY = '你的API密钥';
$GEMINI_ENDPOINT = "https://generativelanguage.googleapis.com/v1/models/gemini-1.5-flash:generateContent?key={$API_KEY}";

// 获取浏览器发送的请求数据
$inputData = json_decode(file_get_contents('php://input'), true);
$userMessage = $inputData['message'];
$chatHistory = $inputData['history'] ?? [];

// 构造Gemini API需要的请求体
$requestBody = [
    'contents' => array_merge(
        $chatHistory,
        [
            [
                'role' => 'user',
                'parts' => [['text' => $userMessage]]
            ]
        ]
    ),
    'system_instruction' => [
        'parts' => [['text' => 'You are a competitive exam helper. Your name is Calculars.']]
    ]
];

// 调用Gemini API
$ch = curl_init($GEMINI_ENDPOINT);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($requestBody));

$apiResponse = curl_exec($ch);
curl_close($ch);

// 把结果返回给浏览器
header('Content-Type: application/json');
echo $apiResponse;
?>

这样一来，API密钥完全藏在服务器端，安全性就有保障了，而且全程只用PHP Apache服务器，完全不需要Node.js。

最后调试小技巧 #

如果还是有问题，先检查：

• 你的API密钥是否正确，有没有开启Gemini API的权限
• 浏览器控制台有没有新的错误（比如CORS问题？不过Gemini API支持CORS，应该没问题）
• 用CDN的时候，尽量指定具体的版本号（比如@0.17.1而不是@latest），避免新版本兼容问题

备注：内容来源于stack exchange，提问作者Shayeq