如何在JavaScript中使用ChatGPT？空响应问题排查

近期尝试将ChatGPT接入JavaScript项目并在HTML中使用以生成随机故事，但请求返回空响应。修复语法错误后执行npm run dev仍无结果，相关代码及命令输出如下：

代码示例 #

const form = 0;
const mytextInput = 0;
const responseTextarea = 0;

function dok(){
    form = document.getElementById(`chat-form`);
    mytextInput = document.getElementById('mytext');
    responseTextarea = document.getElementById('response');
    document.getElementById("response").innerHTML = response;
}


const API_KEY = "sk-proj-d127W0pgdYpbW6uDRaUvT3BlbkFJ90Q1QFAuCi7UMkxxES8P";
const response = "";

async function generate()   {
    const mytext = mytextInput.value.trim();
    const mytext2 = "hello"
    if (mytext2) {
        try {
            response = await fetch('https://api.openai.com/v1/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${API_KEY}`
                },
                body: JSON.stringify({
                    model: 'gpt-4o',
                    messages: [{ role: 'user', content: mytext }],
                    temperature: 1.0,
                    top_p: 0.7,
                    n: 1,
                    stream: false,
                    presence_penalty: 0,
                    frequency_penalty: 0,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                responseTextarea.value = data.choices[0].message.content;
                
            } else {
                responseTextarea.value = 'Error: Unable to process your request.';
            }
        } catch (error) {
            console.error(error);
            responseTextarea.value = 'Error: Unable to process your request.';
        }
    }
};

命令执行输出 #

npm run dev

> scripts@1.0.0 dev
> node skript1.js

问题原因分析 #

• 运行环境不匹配：代码中使用了document.getElementById等浏览器专属的DOM API，但你用Node.js执行代码，Node.js环境没有这些API，代码无法正常运行，自然没有输出。
• 变量赋值错误：form、mytextInput、responseTextarea、response都被声明为const，但后续函数中尝试重新赋值，这会直接抛出语法错误，阻断代码执行。
• 函数未触发：dok()和generate()函数从未被调用，DOM元素永远不会被获取，API请求也不会发起。
• 逻辑判断失效：if (mytext2)中的mytext2是固定值"hello"，这个判断永远为真，完全忽略了用户实际输入的mytext，即使空输入也会发起请求。
• 密钥暴露与API调用限制：直接在前端代码硬编码API密钥极易导致泄露，同时OpenAI禁止前端直接调用API，会触发CORS或密钥验证失败问题。

修复建议 #

• 切换运行环境：将代码嵌入HTML文件中，通过浏览器打开HTML页面运行，而非用Node.js执行。
• 修正变量声明：将需要重新赋值的变量从const改为let，或者在函数内部声明变量，避免赋值报错。
• 添加触发逻辑：在页面加载完成后调用dok()获取DOM元素；给表单添加submit事件监听，或给按钮添加click事件，触发generate()函数。
• 修复判断逻辑：将if (mytext2)改为if (mytext)，确保只有用户输入内容时才发起请求。
• 安全处理密钥：搭建后端代理服务，前端调用自己的后端接口，由后端转发请求到OpenAI API并携带密钥，避免前端暴露密钥。

内容的提问来源于stack exchange，提问作者michal Orsah