Dev x Appwrite Hackathon: #3 CORS Challenges when using Appwrite on Gitpod

Hi friends!

This is the third post of the series DevSpaceForum: An Online Community built with Appwrite x React x TailWindCSS

In this post, I'll write about the several attempts I made to overcome CORS errors when using the Appwrite Web SDK.

My Appwrite Setup

I installed Appwrite Backend as a service (BaaS) on Gitpod. This was so hassle-free. The installation and setup were fast and I was loving it.

The reason I didn't install Appwrite on my local machine was that my local machine's speed has declined over the years and it gets painfully slow most times.

Kudos to the Appwrite team for making it very easy to install virtually.

After going through the Appwrite documentation and I was eager to begin the integration with my front end.

Then came CORS errors.

Please note: CORS stands for Cross-Origin Resource Sharing and it is a cyber security mechanism that allows/prevents one origin to access a resource from a different origin. Read more about it here

Here are the attempts I made to resolve the errors.

Attempt 1: Using Appwrite Web SDK directly in my React Frontend.

I attempted to use the Appwrite SDK directly in my react app so I did the following:

• On my Appwrite project on gitpod, I added a web platform specifying the domain that will interact with the platform.

In this case, the domain is localhost since my react frontend is still locally hosted on my machine.

See the screenshot below for details:

• Then I installed Appwrite web SDK on my react app.

See Appwrite documentation here for the complete steps so setup.

Normally, since I specified the domain as localhost, I am not supposed to have any cors issue because the specified domain will be whitelisted by Appwrite and will be given full permission to access the project's resources.

I'm yet to find out where the issue is from, probably I need to do a little tweaking on the .env file of my gitpod workspace.

CORS bugged me for a whole night. I'm not one to back out of a challenge let alone a bug but due to my 9-5 job (non-tech), I knew I had to try something else.

Attempt 2: Using Appwrite Web SDK in a Proxy server (API)

The last time I encountered CORS issues when communicating with a remote backend, I had to set up a proxy API that would bypass the CORS mechanism.

This article by William Sayama was very helpful in setting up one.

This was what I did:

• Created an express server
• Installed Appwrite Web SDK on it. I installed node-appwrite this time since I will be using a server to interact with Appwrite API.
• Added the necessary configurations to it
• Installed other dependencies like CORS to bypass CORS issues
• Created endpoints on the server that my react app can call

This is how the express server works:

• It serves as an intermediary between my Appwrite backend and my react frontend

• The react frontend sends HTTP requests to the expressJs server, the server sends an equivalent request to Appwrite, Appwrite responds appropriately and the server sends Appwrite's response back to the react app.

Using this method, I was able to create user accounts and I could access all endpoints on the Appwrite rest API.

The challenge with this attempt:

• I couldn't implement user authentication using createSession.

How so?

I could access the createSession endpoint which would return the access tokens that I can use to authenticate subsequent user requests to the server but...

I couldn't transfer these tokens received by my express server to my react app so that it can use the tokens in subsequent requests.

Still, with little time on my hands, I had to think of another way to go about this quickly.

Attempt 3: Disabling CORS on Chrome (My temporary Solution)

StackOverflow came to the rescue here. I was able to disable CORS by creating a Chrome shortcut on windows and editing its properties.

See how to do so here

Now I don't need a proxy API and my react app can interact with the Appwrite API.

At the moment, I have no bugs or errors, or warnings. I hope it stays that way.

Now I can focus on implementing Appwrite services in my app.

How I could have avoided the issues altogether

If I had installed docker on my local machine and then installed Appwrite on it, then I wouldn't have CORS issues while developing.

In production, I can install Appwrite on digital ocean. I have seen several articles and tutorials on how to do so. I don't think I'll have any issue with it.

Production in this terms means hosting both my frontend and backend on live servers (or hosting them virtually).

If you've faced any of the above-mentioned challenges and you were able to resolve them do let me know in the comment section.

For now, let me go back to completing the app. It's almost submission time.

I'll be writing one or two more articles in this series.

Do stay tuned!

Comments

[Dennis Ivy]

I love how you documented the entire process!