Vite构建React生产环境：图片404与OpenAI API 401问题求助

问题1：生产环境图片加载404 #

原因 #

Vite生产构建时，src目录下的资源会被编译打包到dist的特定目录中，原始相对路径./src/assets/king.png在生产环境中不存在——src目录不会被完整复制到构建产物里。

解决方法 #

两种可靠处理方式：

• 方式1：通过import导入图片
  在组件中导入图片资源，Vite会自动处理路径：

  import kingLogo from './assets/king.png';
  
  // 组件内使用
  <img src={kingLogo} height={210} alt="logo" className="logo" />
  

• 方式2：将图片放入public目录
  把图片移动到项目根目录的public文件夹（比如public/assets/king.png），使用根相对路径：

  <img src="/assets/king.png" height={210} alt="logo" className="logo" />
  

  注：public目录下的资源会直接复制到dist根目录，路径保持不变。

问题2：生产环境OpenAI API 401未授权 #

核心原因 #

前端硬编码API密钥存在严重安全风险，生产环境中密钥可能被拦截、篡改，或因浏览器CORS策略、平台环境变量配置错误导致密钥未正确加载。

解决方法 #

1. 使用后端代理请求（强烈推荐）

绝对不要在前端代码中暴露API密钥，搭建简单后端接口转发请求，密钥存储在后端环境变量中：

• 后端示例（Express）

  const express = require('express');
  const { Configuration, OpenAIApi } = require('openai');
  const cors = require('cors');
  require('dotenv').config();
  
  const app = express();
  app.use(cors());
  app.use(express.json());
  
  const config = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  });
  const openai = new OpenAIApi(config);
  
  app.post('/api/generate-questions', async (req, res) => {
    const { topic, language } = req.body;
    try {
      const response = await openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [
          { role: "system", content: "You are a helpful assistant that generates trivia questions." },
          { role: "user", content: `Generate trivia question on the topic of ${topic} in ${language} language with a definitive answer and 3 incorrect answers in the following JSON format:` },
        ],
        temperature: 0.7,
        max_tokens: 256,
        n: 10, 
      });
      res.json(response.data.choices.map(choice => JSON.parse(choice.message.content)));
    } catch (error) {
      res.status(error.response.status).json(error.response.data);
    }
  });
  
  app.listen(3001, () => console.log('Server running on port 3001'));
  

• 前端修改请求逻辑

  const generateQuestions = async (topic, language) => {
    const response = await fetch('/api/generate-questions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ topic, language }),
    });
    const generatedQuestions = await response.json();
    console.log(generatedQuestions);
    return generatedQuestions;
  };
  

  注：部署时需将后端与前端一同部署，开发阶段可在vite.config.js中配置server.proxy实现请求转发。

2. 临时方案：正确配置Vite环境变量（不推荐，仍有安全风险）

若暂时无法搭建后端，需确保环境变量配置正确：

• 在项目根目录创建.env文件，变量名必须以VITE_开头：

  VITE_OPENAI_API_KEY=your_api_key_here
  

• 前端通过import.meta.env获取变量：

  const config = new Configuration({
    apiKey: import.meta.env.VITE_OPENAI_API_KEY,
  });
  

  警告：该方式仍会将密钥暴露在前端代码中，存在被盗用风险，仅适合临时测试。

3. 检查请求头

确认生产环境中请求的Authorization头格式正确（应为Bearer ${apiKey}），部分平台或代理可能修改请求头，导致密钥无法正确携带。

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