在 React 前端从 Zoho API 获取数据时出现 CORS 错误
CORS Error when fetching data from Zoho API on React frontend
我工作的公司使用生物识别考勤，并将数据同步到 Zoho 服务器以保存记录。我尝试开发一个 web-app 利用 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-related HTTP headers，但没有效果。如果需要更多详细信息，请告诉我。谢谢！
P.S。如果有人可以 ELI5 为什么会发生这种情况以及从 API 服务器到我的客户端的数据传输实际上是如何工作的，我也将非常感激。
解决人们建议的最佳方法是创建我自己的后端服务器。 （我是用 expressjs 做的）。服务器查询 API，获取结果并且 React 应用能够从本地服务器获取结果，没有任何 CORS 问题。
在本地服务器上运行良好。不过，必须弄清楚如何在远程服务器上部署相同的内容。
默认情况下不允许从 browser/client 发出 cross-origin 请求。这是浏览器出于安全目的强制实施的 CORS 限制。
了解 CORS：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
为了完成这项工作，我们有两个选择，
- 从客户端使用 AJAX 调用您的 server-side 应用程序，这将反过来调用 Zoho API 来获取详细信息
- 检查 API 提供商是否提供了一个选项来为他们的 API 设置“无访问控制允许来源”header，这样您就可以点击 API 直接来自客户
所有其他选项都是黑客或临时解决方案
我工作的公司使用生物识别考勤，并将数据同步到 Zoho 服务器以保存记录。我尝试开发一个 web-app 利用 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-related HTTP headers，但没有效果。如果需要更多详细信息，请告诉我。谢谢！
P.S。如果有人可以 ELI5 为什么会发生这种情况以及从 API 服务器到我的客户端的数据传输实际上是如何工作的，我也将非常感激。
解决人们建议的最佳方法是创建我自己的后端服务器。 （我是用 expressjs 做的）。服务器查询 API，获取结果并且 React 应用能够从本地服务器获取结果，没有任何 CORS 问题。
在本地服务器上运行良好。不过，必须弄清楚如何在远程服务器上部署相同的内容。
默认情况下不允许从 browser/client 发出 cross-origin 请求。这是浏览器出于安全目的强制实施的 CORS 限制。
了解 CORS：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
为了完成这项工作，我们有两个选择，
- 从客户端使用 AJAX 调用您的 server-side 应用程序，这将反过来调用 Zoho API 来获取详细信息
- 检查 API 提供商是否提供了一个选项来为他们的 API 设置“无访问控制允许来源”header，这样您就可以点击 API 直接来自客户
所有其他选项都是黑客或临时解决方案