如何将React表单数据提交到Express.js服务构造请求URL以隐藏API密钥

原来的onButtonSubmit不再直接请求第三方API，改为向你的Express服务发送POST请求，仅传递用户输入的内容即可，密钥相关逻辑完全不暴露给前端：

onButtonSubmit = () => {
  fetch('http://你的Express服务地址/api/fetch-data', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      input: this.state.input
    })
  })
  .then(res => res.json())
  .then(
    result => {
      this.setState({
        isLoaded: true,
        array1: result.array1,
        array2: result.array2,
        array3: result.array3,
        array4: result.array4,
        array5: result.array5,      
        route: 'fetched'
      });
    },
    error => {
      this.setState({
        isLoaded: false,
        error: error
      });
    }
  );
}

首先安装所需依赖：
npm install express cors axios dotenv

服务端代码示例：

require('dotenv').config()
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const app = express();

// 跨域配置：生产环境请替换为你的前端实际域名，不要用*
app.use(cors({ origin: '*' }));
// 解析JSON格式的请求体
app.use(express.json());

// 处理前端请求的接口
app.post('/api/fetch-data', async (req, res) => {
  try {
    const userInput = req.body.input;
    // 完整API地址拼接完全在后端完成，密钥不会泄露到前端
    const apiUrl = process.env.API_PREFIX + userInput + process.env.API_SUFFIX_WITH_KEY;
    
    // 请求第三方API
    const apiResponse = await axios.get(apiUrl);
    // 将第三方返回的数据直接透传给前端
    res.json(apiResponse.data);
  } catch (error) {
    res.status(500).json({ error: '数据请求失败' });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`代理服务已启动，端口：${PORT}`);
});

在服务端根目录新建.env配置文件存储敏感信息，不要把该文件提交到代码仓库：

API_PREFIX=你的URLStringPart1
API_SUFFIX_WITH_KEY=你的带API密钥的URLStringpart2
PORT=3001

• 生产环境必须把CORS配置的*替换为前端实际域名，避免接口被恶意调用
• 可增加用户输入校验逻辑，避免非法字符导致URL拼接异常
• 若第三方API有调用频率限制，可在服务端增加缓存逻辑减少重复请求

内容的提问来源于stack exchange，提问作者Otávio C.