How do I solve CORS issues with the Zoho Expense Report API?

Question

In my project where I use Angular 16, I want to use the Zoho Expense APIs, specifically the expense report API. Since I am using Angular, I created a client-based application and obtained my Client ID, from which I generated an access token. Using this documentation (https://www.zoho.com/crm/developer/docs/api/v6/get-users.html), I successfully retrieved the users in my Angular app.

However, I am unable to retrieve expense reports using this documentation (https://www.zoho.com/expense/api/v1/expense-reports/#overview). I am encountering a CORS error. I have checked the headers and I am sending "X-com-zoho-expense-organizationid", content type, and authorization as my access token. My scope also includes "ZohoExpense.fullaccess.ALL". While the API works correctly when I make the request from Postman, it gives an error in my Angular app.

Do you have a possible solution for this? network headers

I have tried all the different methods including the documentation. But couldn't solve the problem.

Answer 1

I solved the problem; unfortunately, you cannot call Zoho APIs other than CRM from the client side. What needs to be done here is to create a server and send requests to the Zoho APIs through this server. I solved the problem by creating a Lambda function.

Answer 2

Your API would work as expected in Postman because Postman simulates the server environment and doesn't enforce CORS.

To access Zoho Expense APIs, you can create a server code since client calls would be blocked. Create a node js server to act as an intermediary server. You can get access token and refresh token, pass the access token to your server to pass it to the expense apis.

I tried to build the same with NextJS. You can check this repo for an idea iamnoufal/expense-nextjs