node.js - 在 React 前端从 Zoho API 获取数据时出现 CORS 错误

标签 node.js api cors create-react-app

我工作的公司使用生物识别考勤,并将数据同步到 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/

相关文章:

java - TargetDataLine.getFramePosition()vs read()

javascript - 如何访问跨域iframe内容? (上传文件跨域)

javascript - NodeJS 转义反斜杠

node.js - 当类型有条件时,如何检测 Typescript 中变量的正确类型

python - 基于Django App的API认证

javascript - jQuery.each 实现与 native Array.forEach 不同

node.js - 在 Web 应用程序的内存中存储复杂对象?

python - 如何在 NPM 安装期间使用不同版本的 python?

javascript - CORS 是否意味着您将不会再在控制台中看到同源策略错误?

javascript - 如何在 Spring Boot + Spring Security 应用程序中配置 CORS?