2

The company I work at makes use of Biometric attendance, and syncs the data up to Zoho servers for record keeping. I tried to develop a web-app making use of the Zoho People API, which lets me know when I checked in and when my 8.5 hours will be up.

I used Create-React-App to develop the same.

Now, the API calls work properly in the node server, where I am able to log the data, but when I start a local server using npm start, Chrome is not able to show the data and I get the following error:

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.

To get around the problem I had to install Allow-Control-Allow-Origin chrome extension : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

Using this extension, the app works, and I'm able to see the data. But without this extension, I'm not. Have tried including some CORS-related HTTP headers in the js file, but to no effect. Please let me know if more details are required. Thanks!

P.S. I'd also be really grateful if someone could ELI5 why this was happening and how the data transfer from the API server to my client is actually working.

priyank1205
  • 45
  • 8
  • I presume, you are hitting the api from your local (DEV) environment, Hence for timebeing you can use the extension, once you move this code to live, you won't face these `CORS` issues. – David R Sep 05 '18 at 07:21
  • Hi @DavidR! I have pushed the code to Heroku. And am facing the same issues there. The extension is my only way out there too – priyank1205 Sep 05 '18 at 07:22
  • It appears that the Zoho API does not support CORS and, as such, you cannot make requests to this API using your web-browser. – Kirk Larkin Sep 05 '18 at 07:31
  • This thread might help you => https://stackoverflow.com/questions/47902840/enable-cors-in-create-react-app – David R Sep 05 '18 at 07:31
  • @KirkLarkin How does the extension help in that, then. It's just adding functionality to the client, i.e. my browser, right? – priyank1205 Sep 05 '18 at 07:34
  • @DavidR Tried that too. Doesn't work with remote API servers I guess. – priyank1205 Sep 05 '18 at 07:35
  • Sure - It's just hacking away at the incoming response from the server to add the CORS headers that subsequently makes the browser happy. You could always try and get all of your users to install the extension (no, **I'm kidding**). – Kirk Larkin Sep 05 '18 at 07:36
  • @KirkLarkin In that case, can I add something to my index.js file to attach those headers to the response? – priyank1205 Sep 05 '18 at 07:39
  • Nope. Either the server has to set the headers or you have to use a hacky extension in the browser. Web servers *opt-in* to allowing CORS requests - if your code could just say "No, seriously, it's fine - I can access this resource" then CORS would be *absolutely pointless*. – Kirk Larkin Sep 05 '18 at 07:41
  • @KirkLarkin The React app serves as an intermediate server, which the browser queries to when I open it on chrome, right? Can I not include some code there to help calm the browser? – priyank1205 Sep 05 '18 at 07:45
  • Sure - that's what @DavidR's link was alluding to. The solution here is to proxy the requests so that instead of coming from the browser, they come from your own server, etc. Does the intermediate server you have run only in development is it for production too? – Kirk Larkin Sep 05 '18 at 07:47
  • @KirkLarkin I have hosted the files on a Heroku server, and that too requires the help of the chrome extension. – priyank1205 Sep 05 '18 at 07:49
  • This has nothing to do with how you host your files - it's entirely down to *where* the request to the Zoho API is coming from. Your error message in the question clearly shows that the request is coming from the browser and is not being proxied. – Kirk Larkin Sep 05 '18 at 09:11
  • 1
    That explains. I should maybe try with an express server and proxying the requests. Thanks! – priyank1205 Sep 05 '18 at 09:25

2 Answers2

2

Making a cross-origin request from the browser/client is not allowed by default. That is the CORS restriction enforced by the browsers for security purposes.

Know about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

To make this work we have two options,

  • From client call your server-side app using AJAX which will, in turn, call the Zoho API to fetch the details
  • Check if there is an option from API provider to set the "No Access Control Allow Origin" header for their API so that you can hit the API directly from the client

All other options would be a hack or temporary solution

Srini Karthikeyan
  • 701
  • 8
  • 14
1

The best way around people suggested was to create a backend server of my own. (I did that using expressjs). The server queried the API, fetched the results and the react app was able to fetch it from the local server, without any CORS issues.

It works fine on local servers. Have to figure out how to deploy the same on remote servers though.

priyank1205
  • 45
  • 8