React调用POST API报错：URL scheme 'mongodb+srv'不被支持

你犯了核心错误：直接把MongoDB数据库的连接字符串作为API请求的host使用了。浏览器的fetch API只支持http/https这类网络协议，不识别mongodb+srv这个数据库连接协议，因此抛出"URL scheme 'mongodb+srv' is not supported"错误。

MongoDB连接字符串是给后端服务器用的，用于让后端程序连接数据库；前端不能直接对接数据库，必须通过后端提供的API接口完成数据操作。

1. 搭建后端API服务 #

以Node.js + Express为例，编写简单后端服务，负责连接MongoDB并提供更新笔记的接口：

// 后端server.js示例
const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接MongoDB（填入你的数据库连接字符串）
mongoose.connect('mongodb+srv://vivek:xyz@cluster0.mdigo2h.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败', err));

// 定义笔记数据模型（根据你的实际数据结构调整）
const Note = mongoose.model('Note', {
  title: String,
  description: String,
  tag: String
});

// 解析JSON格式的请求体
app.use(express.json());

// 编写更新笔记的API接口
app.post('/api/notes/updatenote/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const { title, description, tag } = req.body;
    // 更新数据库中的笔记数据
    const updatedNote = await Note.findByIdAndUpdate(id, { title, description, tag }, { new: true });
    res.json(updatedNote);
  } catch (err) {
    res.status(500).json({ error: '笔记更新失败' });
  }
});

// 启动后端服务，监听5000端口
app.listen(5000, () => console.log('后端服务运行在http://localhost:5000'));

2. 修改前端代码 #

将前端的host改为后端服务的地址，同时完善异步请求的错误处理逻辑：

const editNote = async (id, title, description, tag) => {
  // 替换为后端服务的地址，本地开发通常用http://localhost:5000
  const host = 'http://localhost:5000';

  try {
    const response = await fetch(`${host}/api/notes/updatenote/${id}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "auth-token": "xyz", // 后续需在后端实现token验证逻辑
      },
      body: JSON.stringify({ title, description, tag }),
    });

    if (!response.ok) {
      throw new Error('请求失败，请检查后端服务状态');
    }

    const json = await response.json(); // 此处需添加await，确保获取到解析后的响应数据
    console.log('笔记更新成功', json);
  } catch (err) {
    console.error('更新操作出错', err);
  }
}

3. 运行流程 #

• 先启动后端服务：在后端代码目录执行node server.js
• 再启动前端项目，点击按钮触发请求，即可正常调用API完成笔记更新操作

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