React集成生物识别设备API时遭遇CORS错误的解决咨询

问题概述 #

React应用（本地开发端口5173，部署在Digital Ocean）调用本地Windows机器上的生物识别API（http://localhost:1234）时，触发CORS错误：

Access to XMLHttpRequest at 'http://localhost:1234/?type=capture&temp1=ss&temp2=ss&temp3=ss' from origin 'http://localhost:5173' has been blocked by CORS policy: Request header field baggage is not allowed by Access-Control-Allow-Headers in preflight response.

无法修改API源代码（API为设备自带的可执行文件），React内置代理未解决问题。

解决方案 #

1. 移除Axios请求中的baggage头 #

错误核心是浏览器/Axios自动添加了baggage请求头，但目标API的CORS配置未允许该头。可在请求中主动移除：

单个请求配置

修改你的请求服务代码，添加transformRequest删除baggage头：

export const makeCaptureRequest = async() => {
  const instance = axios.create({
    baseURL:"http://localhost:1234/",
    headers: {
      "Content-type":'application/json',
    },
    // 移除baggage请求头
    transformRequest: [(data, headers) => {
      delete headers.baggage;
      delete headers['baggage']; // 兼容不同大小写
      return JSON.stringify(data || {});
    }]
  })
  return await instance.post("?type=capture&temp1=ss&temp2=ss&temp3=ss")
}

全局Axios拦截器（推荐）

多个请求需处理时，全局配置更高效，在React入口文件（如main.jsx）添加：

import axios from 'axios';

axios.interceptors.request.use(config => {
  // 移除所有请求中的baggage头
  delete config.headers.baggage;
  return config;
});

2. 搭建本地代理服务器 #

若移除头无效，可搭建本地Node.js代理转发请求，绕过浏览器CORS限制：

代理服务器代码（proxy-server.js）

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const cors = require('cors');

const app = express();
// 允许React应用所在域名访问代理
app.use(cors({ origin: true }));

// 转发请求到生物识别API
app.use('/biometric', createProxyMiddleware({
  target: 'http://localhost:1234',
  changeOrigin: true,
  pathRewrite: { '^/biometric': '' }, // 重写路径，去掉前缀
  onProxyReq: (proxyReq) => {
    // 确保代理请求中也移除baggage头
    delete proxyReq.headers.baggage;
  }
}));

// 代理运行在3000端口
app.listen(3000, () => console.log('本地代理服务器运行在 http://localhost:3000'));

修改React请求配置

将Axios的baseURL改为代理地址：

baseURL:"http://localhost:3000/biometric/"

3. 开发环境临时绕过CORS（仅测试用） #

仅用于开发测试，关闭浏览器同源策略：

• Chrome浏览器：右键快捷方式，添加启动参数：

  --disable-web-security --user-data-dir="C:/ChromeDevSession"
  

  注意：此方式会关闭浏览器安全防护，不要用该窗口访问无关网站。

4. 部署场景说明 #

React应用部署在Digital Ocean，但生物识别设备是本地Windows机器，用户需在本地打开部署的应用时，浏览器能直接访问本地localhost:1234端口。此时仍需使用上述1或2的方法，因为CORS是浏览器端限制，与应用部署位置无关。

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