从 React 前端的 Zoho API 获取数据时出现 CORS 错误

Posted 2023-03-04

【中文标题】从 React 前端的 Zoho API 获取数据时出现 CORS 错误

【英文标题】：CORS Error when fetching data from Zoho API on React frontend

【发布时间】：2019-02-10 06:05:21

【问题描述】：

我工作的公司使用生物识别考勤，并将数据同步到 Zoho 服务器以保存记录。我尝试使用 Zoho People API 开发一个网络应用程序，它可以让我知道我何时签到以及我的 8.5 小时何时结束。

我使用 Create-React-App 进行开发。

现在，API 调用在节点服务器中正常工作，我可以在其中记录数据，但是当我使用 npm start 启动本地服务器时，Chrome 无法显示数据并且我收到以下错误：

Failed to load https://people.zoho.com/people/api/attendance/getAttendanceEntries?authtoken=*******&date=05-Sep-2018&dateFormat=dd-MMM-yyyy&emailId=******&empId=****: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

为了解决这个问题，我必须安装 Allow-Control-Allow-Origin chrome 扩展：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

使用此扩展程序，该应用程序可以运行，并且我可以查看数据。但没有这个扩展，我不是。已尝试在 js 文件中包含一些与 CORS 相关的 HTTP 标头，但没有效果。如果需要更多详细信息，请告诉我。谢谢！

附：如果有人能 ELI5 为什么会发生这种情况以及从 API 服务器到我的客户端的数据传输实际上是如何工作的，我也将非常感激。

【问题讨论】：

我想，您是从本地 (DEV) 环境中访问 api，因此暂时您可以使用扩展程序，一旦您将此代码移动到生活中，您将不会面对这些 CORS问题。

嗨@DavidR！我已将代码推送到 Heroku。我在那里面临同样的问题。扩展也是我唯一的出路

Zoho API 似乎不支持 CORS，因此您无法使用 Web 浏览器向该 API 发出请求。

这个帖子可能对你有帮助 => ***.com/questions/47902840/…

这就解释了。我也许应该尝试使用快速服务器并代理请求。谢谢！

【参考方案1】：

解决人们建议的最佳方法是创建我自己的后端服务器。 （我使用 expressjs 做到了）。服务器查询 API，获取结果，react 应用能够从本地服务器获取结果，没有任何 CORS 问题。

它在本地服务器上运行良好。必须弄清楚如何在远程服务器上部署相同的内容。

【参考方案2】：

默认情况下不允许从浏览器/客户端发出跨域请求。这是浏览器出于安全目的强制执行的 CORS 限制。

了解 CORS：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

要完成这项工作，我们有两个选择，

从客户端使用 AJAX 调用您的服务器端应用程序，然后调用 Zoho API 来获取详细信息 检查 API 提供商是否有一个选项可以为其 API 设置“No Access Control Allow Origin”标头，以便您可以直接从客户端访问 API

所有其他选项都是破解或临时解决方案