在React应用中实现Form Field Detection时遇到PdfTron CORS错误

方案1：使用后端代理（推荐） #

直接在前端调用第三方API易触发CORS限制，最可靠的解决方式是通过自有后端中转请求：

• 搭建轻量后端服务（如Node.js/Express、Python/Flask），由后端发起对https://ai-serve.pdftron.com/recog/predict的请求
• React前端改为请求自有后端接口，后端处理完请求后将结果返回给前端
• Node.js/Express示例代码：

const express = require('express');
const axios = require('axios');
const app = express();
const cors = require('cors');

app.use(cors());
app.use(express.json());

app.post('/api/form-field-detect', async (req, res) => {
  try {
    const response = await axios.post('https://ai-serve.pdftron.com/recog/predict', req.body, {
      headers: {
        // 此处添加PDFTron API要求的认证头或其他必要请求头
        'Content-Type': 'application/json'
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { message: '请求失败' });
  }
});

app.listen(5000, () => console.log('代理服务运行在端口5000'));

• React前端请求路径改为：fetch('http://localhost:5000/api/form-field-detect', 请求配置)

方案2：React开发环境配置内置代理 #

仅适用于开发阶段测试，利用Create React App的内置代理功能：

• 在项目根目录的package.json中添加一行配置："proxy": "https://ai-serve.pdftron.com"
• 前端请求路径改为/recog/predict，开发服务器会自动将请求转发至目标API
• 注意：该方案仅支持开发环境，生产环境仍需依赖后端代理

方案3：谨慎使用no-cors模式（不推荐） #

错误提示提到的no-cors模式可绕过CORS检查，但会限制读取响应内容（响应会被标记为opaque，无法获取返回数据），仅适用于无需处理响应结果的场景：

fetch('https://ai-serve.pdftron.com/recog/predict', {
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(你的表单数据)
});

额外提示 #

确认是否按照PDFTron文档要求添加了正确的API密钥或认证信息，部分API需要在请求头中携带认证凭证，缺失也可能导致请求异常。

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