我工作的公司使用生物识别考勤,并将数据同步到 Zoho 服务器以保存记录。我尝试使用 Zoho People API 开发一个网络应用程序,它可以让我知道我何时签到以及我的 8.5 小时何时结束。
我使用 Create-React-App 来开发同样的东西。
现在,API 调用在 Node 服务器中正常工作,我可以在其中记录数据,但是当我使用 npm start 启动本地服务器时,Chrome 无法显示数据,并且出现以下错误:
无法加载 https://people.zoho.com/people/api/attendance/getAttendanceEntries?authtoken=********&date=05-Sep-2018&dateFormat=dd-MMM-yyyy&emailId= ******&empId=****:请求的资源上不存在“Access-Control-Allow-Origin” header 。因此,不允许访问源“http://localhost:3000”。如果不透明响应满足您的需求,请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。
为了解决这个问题,我必须安装Allow-Control-Allow-Origin chrome扩展:https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
使用此扩展程序,应用程序可以运行,并且我可以查看数据。但如果没有这个扩展,我就不会。尝试在js文件中包含一些与CORS相关的HTTP header ,但没有效果。如果需要更多详细信息,请告诉我。谢谢!
附注如果有人能够 ELI5 解释为什么会发生这种情况以及从 API 服务器到我的客户端的数据传输实际上是如何工作的,我也会非常感激。
最佳答案
默认情况下不允许从浏览器/客户端发出跨域请求。这是浏览器出于安全目的而强制实现的 CORS 限制。
了解 CORS:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
为了实现这项工作,我们有两个选择,
- 从客户端使用 AJAX 调用您的服务器端应用,服务器端应用又会调用 Zoho API 来获取详细信息
- 检查 API 提供商是否有选项为其 API 设置“无访问控制允许来源” header ,以便您可以直接从客户端访问 API
所有其他选项都是黑客或临时解决方案
关于node.js - 在 React 前端从 Zoho API 获取数据时出现 CORS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52179277/