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

Question

我工作的公司利用生物特征识别出勤，并将数据同步到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标头，但没有任何效果。如果需要更多详细信息，请告诉我。谢谢！

P.S。如果有人可以ELI5发生这种情况的原因以及从API服务器到客户端的数据传输实际上如何工作，我也将非常感谢。

Answer 1

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

在本地服务器上工作正常。不过，必须弄清楚如何在远程服务器上部署相同的软件。

Answer 2

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

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

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

• 从客户端使用 AJAX 调用您的服务器端应用程序，然后调用 Zoho API 以获取详细信息
• 检查 API 提供商是否有选项可以为其 API 设置“无访问控制允许来源”标头，以便您可以直接从客户端访问 API

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