React项目调用Userfront API遇CORS报错：XMLHttpRequest与net::ERR_FAILED

问题分析 #

你遇到的CORS错误核心原因是：Userfront的API服务器未将你的本地开发地址http://localhost:3001纳入允许跨域请求的来源列表，导致浏览器拦截了请求。另外注意到控制台报错的端点是some-secure-endpoint，但你提供的代码调用的是auth/reset/link，需确认是否存在其他未正确配置的API请求。

解决方案 #

1. 在Userfront控制台配置允许的来源 #

登录Userfront后台，找到对应租户（rbvdmyqb）的设置页面：

• 定位到Security或CORS相关配置项
• 将http://localhost:3001添加到Allowed origins列表
• 保存配置后等待几分钟，让设置生效

2. 核对所有API请求的端点 #

检查代码中所有调用Userfront API的位置，确保：

• 端点路径正确，避免误调用需额外权限或未配置CORS的私有端点
• 所有请求的域名均为https://api.userfront.com，无拼写错误

3. 简化Axios请求配置 #

避免添加不必要的自定义请求头，这类头会触发复杂的预检请求，导致CORS验证失败。示例正确写法：

const payload = { email: "user@example.com" };
const response = await axios.post(
  "https://api.userfront.com/v0/tenants/rbvdmyqb/auth/reset/link",
  payload
);

4. 本地开发临时代理方案（仅开发环境） #

若需快速绕过CORS问题进行开发，可在React项目的package.json中添加代理配置：

{
  "proxy": "https://api.userfront.com"
}

之后将请求路径改为相对路径：

const response = await axios.post(
  "/v0/tenants/rbvdmyqb/auth/reset/link",
  payload
);

注意：此方法仅适用于本地开发，生产环境必须依赖Userfront官方的CORS配置。

内容的提问来源于stack exchange，提问作者Nurbek Aliqo'ziyev