React中使用axios.delete操作JSON文件的安全实现方案咨询

针对你遇到的前端直接调用json-server接口导致URL暴露的问题，这里有几个实用的解决思路：

1. 搭建后端中间层（推荐生产环境使用） #

不要让前端直接请求json-server，而是自己写一个轻量的后端服务（比如用Node.js + Express）作为中间层。前端只和你的后端交互，后端再转发请求到json-server，这样前端永远看不到json-server的真实地址。

示例代码： #

后端（Express）：

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 5000;

// 处理删除请求的接口
app.delete('/api/posts/:id', async (req, res) => {
  try {
    // 仅在后端暴露json-server地址
    const response = await axios.delete(`http://localhost:3001/posts/${req.params.id}`);
    res.status(response.status).send(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

app.listen(PORT, () => {
  console.log(`中间层服务运行在 http://localhost:${PORT}`);
});

前端修改后的删除函数：

function postDelete() {
  axios.delete(`http://localhost:5000/api/posts/${Number(pathUrl)}`)
    .then(() => navigate('/'))
    .catch(err => console.error('删除失败:', err));
}

2. 给json-server添加鉴权验证 #

给json-server加上权限校验，确保只有合法请求才能执行删除操作。可以用现成中间件，也能自己写基础的token验证逻辑。

示例：自定义token验证中间件 #

创建auth.js文件：

module.exports = (req, res, next) => {
  // 从请求头获取token
  const token = req.headers.authorization?.split(' ')[1];
  // 简单验证token，实际场景建议用JWT等标准鉴权方案
  if (token === 'your-custom-secret-token') {
    return next();
  }
  res.status(401).send('无权限执行此操作');
};

启动json-server时加载该中间件：

json-server --watch db.json --middlewares ./auth.js

前端修改后的删除函数：

function postDelete() {
  axios.delete(`http://localhost:3001/posts/${Number(pathUrl)}`, {
    headers: {
      Authorization: 'Bearer your-custom-secret-token'
    }
  })
    .then(() => navigate('/'))
    .catch(err => console.error('删除失败:', err));
}

3. 限制json-server的访问范围（仅开发阶段适用） #

如果只是开发环境使用，可以通过配置缩小json-server的访问范围：

• 启动时绑定本地IP：json-server --watch db.json --host 127.0.0.1，避免外部访问
• 生产环境务必替换为真正的后端服务（比如Node.js + MySQL/MongoDB），不要直接使用json-server

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