Recent, I’m developing my tarot app and it needs to send HTTP requests to back-end API. I face CORS issue several times, but I forgot how to resolve each time, so in this post, I will record the resolution.

Why & What is CORS (Cross-origin resource sharing)

I will only have some shorten introduction of CORS here.

Before CORS, we refer the Same-origin policy first, due to the Information Security, to avoid requests from another domain outside the original domain, because some hackers or third-party software will mock the fake domain and attack your services, so any requests (for example, calling API or any CSS and Images resources need in same domain).

However, in recent technological trend, it’s normal that services request outside API and resources, so there is CORS requests happened.

1. My case is Jamstack, my front-end hosted on Github, and my Back-end API hosted on Vercel, when front-end send the request and showed Access to Reqeust, ... has been blocked by CORS policy.

I think many developers have faced this CORS issue many times.

2. Second case is I developed a website and it has operation with Google Firestore & Firebase, also faced the CORS.

I tried many resolution fix in front-end, but it doesn’t work, the rresolution in my these 2 cases, is to add white list to allow domain sending request, so in this post, I will show the implementation code.

Case 1: Front-end React.js with Back-end Python Fask API

When React.js use fetch method for sending HTTPS Request and Back-end API blocked the request because the CORS.

The resolution is we implemented the CORS in API layer and add the front-end domain into white list, here is the code.

# Import fastapi package
from fastapi import FastAPI

# Import fastapi cors feature
from fastapi.middleware.cors import CORSMiddleware

# (1) Init an app
app = FastAPI()

# (2) put allow domains in white list
origins = [
    "http://localhost",
    "https://example.com"
]

# (3) Init CORS object and put the white list with it
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# (4) Write api route
@app.get("/")
def hello_word():
    return {"Hello": "World"}

Case 2: React.js operate data with Google Firestore or Firebase

This case is when I use React.js and store/get data with Firebase (Firestore/Realtime DB), the domain blocked by Firebase.

So what we need to do is going to Firebase Console and set the allow domains in white list.

First, we go Google Firebase Console and choose your project.

Then we need to create Authentication for this project (If you have Authentication, you can skip this)

Click All projects -> Select Authentication -> Get started

After you created Authentication, you can configure allow enter users or Sign-in method in the Users and Sign-in method tabs, but now we go to the Settings tab.

Go to Authentication -> Settings -> Authorized domains -> Add domain, and then add the domains you want to let it allowed without http:// or https://.

After added, the services can operate with the Firebase without CORS errors.

That’s all for my resolution, if you have quesions, please leave in below Comment section, thank you!