React应用出现Cannot GET /错误，请求Node.js后端问题排查

你的Cannot GET /错误主要来自以下几个核心问题，逐个解决即可：

1. 后端未处理GET根路径请求 #

你的Express代码只定义了POST '/'接口，但当你直接访问React应用（比如浏览器打开前端端口地址），或者前端误发GET请求到根路径时，后端没有对应路由处理，就会返回Cannot GET /。

如果需要后端托管React静态文件并支持前端路由，添加以下代码：

const path = require('path');
// 托管React构建后的静态文件
app.use(express.static(path.join(__dirname, 'client/build')));

// 所有GET请求返回React的index.html，适配前端路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

如果仅测试API，确保前端发送的是POST请求到http://localhost:3080，而非GET请求。

2. 缺少必要的Express中间件 #

后端代码未配置请求体解析中间件，会导致无法读取前端发送的POST数据，甚至引发请求处理异常。添加以下中间件：

// 解析JSON格式请求体
app.use(express.json());
// 解析URL编码格式请求体
app.use(express.urlencoded({ extended: true }));

3. 跨域问题（前后端端口不一致） #

React默认运行在3000端口，后端在3080端口，浏览器会因同源策略拦截跨域请求。需安装并配置CORS中间件：

1. 安装依赖：

npm install cors

2. 在Express代码中引入并启用：

const cors = require('cors');
app.use(cors());

4. OpenAI客户端未初始化 #

代码中调用了openai.createCompletion但未初始化客户端，会导致运行时错误。补充初始化代码：

const { OpenAI } = require('openai');
// 建议用环境变量存储密钥，避免硬编码
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

完整修正后的后端代码示例 #

const express = require('express');
const cors = require('cors');
const { OpenAI } = require('openai');
const path = require('path');
require('dotenv').config(); // 加载环境变量

const app = express();
const port = 3080;

// 初始化OpenAI客户端
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

// 配置中间件
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 托管React静态文件（按需启用）
app.use(express.static(path.join(__dirname, 'client/build')));

// AI请求处理接口
app.post('/', async (req, res) => {
  try {
    const response = await openai.createCompletion({
      model: "text-davinci-003",
      prompt: req.body.prompt || "Say this is a test", // 支持从前端接收自定义prompt
      max_tokens: 7,
      temperature: 0,
    });
    console.log(response.data.choices[0].text);
    res.json({ data: response.data });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// 适配前端路由的GET请求处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/build/index.html'));
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

额外注意事项 #

• 确保前端请求地址为http://localhost:3080，且请求方法为POST；开发环境可在React的package.json中添加"proxy": "http://localhost:3080"，简化请求路径。
• 使用dotenv管理环境变量：创建.env文件写入OPENAI_API_KEY=你的密钥，避免密钥泄露。

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