How To Fix CORS Issues In FastAPI?

Introduction

CORS (Cross Origin Resource Sharing) issues arise when the browser blocks a frontend application from accessing a FastAPI backend. This could be due to the CORS permissions not defined in FastAPI, or misconfiguration of these permissions. In this guide you will learn how to fix CORS issues in FastAPI step by step.

What is CORS?

CORS is a browser safety rule that controls how the servers of different origins can share resources to each other. This safety rule is enforced by the browser based on the permissions sent by the backend server such as FastAPI, that decides.

• Who is allowed to send a request
• Which methods are allowed
• Which headers are allowed
• Whether to include cookies or not

Causes of CORS Issue

The most common causes of CORS issue are:

• CORS permissions not defined
• Origin mismatch
• Methods not allowed
• Headers not allowed

How to Fix the CORS Issue in FastAPI?

To fix the CORS issue in the FastAPI make sure CORS is enabled and correctly configured in FastAPI. If the CORS is disabled, you will get the following error in the browser.

Access to fetch at 'https://api.example.com/data'
from origin 'https://example.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

How To Configure CORS in FastAPI?

To enable the CORS in FastAPI, there is a built-in module that allows you to add CORS permissions.

You can add the following code in your main FastAPI file, usually main.py.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
# Example Origins
origins = [
"http://localhost:3000",
"https://www.example.com"
]
 
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials

allow_origins: It takes a list of origins such as http://localhost:3000, that are permitted to make cross origin requests, or you can also use the wildcard [*] to allow all the origins. The origin is the combination of three things:

• Protocol – http
• URL –localhost
• Port – 3000

Always make sure the allowed origins always match your frontend application origins. Any mismatch would result in the following error:

Access to fetch at 'https://api.example.com'
from origin 'https://example.com' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header has a value
'http://localhost:3000' that is not equal to the supplied origin.

Remember: The http and https are two different protocols. Protocol mismatch will also result in the above error.

Note: In production origins such as https://www.example.com, there is no need to explicitly add the port, if it is running on port 443. The browser automatically assumes the port 443 as default port.

allow_credentials: It tells the browser whether or not the frontend application can send the cookies. If its value is set to False, adding cookies in the request would result in a the following error:

Access to fetch at 'https://api.example.com'
from origin 'https://example.com'
has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Credentials' header
in the response is '' which must be 'true'
when the request's credentials mode is 'include'

Note: Do not set allow-credential to True, if the allow_origin is set to [*]. This will result in a CORS error. Always make sure allow_origin has been set to specific URL instead of [*] when the allow-credential value is set to True. Otherwise you will get the following error in the browser:

Access to fetch at 'https://api.example.com'
from origin 'https://example.com' has been blocked by CORS policy:
The value of the 'Access-Control-Allow-Origin' header in the response must not be '*'
when the request's credentials mode is 'include'.

allow_methods: It tells the browser which HTTP methods the frontend application can use such as GET, PUT, POST, DELETE. You can also use [*] as a wildcard to allow all the standard HTTP methods.

If the frontend application uses an HTTP method that is not allowed in CORS permission, it would result in following error:

Access to fetch at 'https://api.example.com'
from origin 'https://example.com' has been blocked by CORS policy:
Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

allow_header: It tells the browser which metadata the frontend application can send along with the HTTP request. This metadata commonly includes Content-Type, Authorization.

You can also use [*] as a wildcard to allow all the headers in the HTTP request. If any header is not permitted, it would result in the following error:

Access to fetch at 'https://api.example.com'
from origin 'https://example.com'
has been blocked by CORS policy:
Request header field authorization is not allowed
by Access-Control-Allow-Headers in preflight response.

Note: The most common use case of HTTP header is that you can send JSON Web Tokens (JWT) along with request to acess the protected routes. To secure the protected routes in FastAPI with JWT authentication follow the step by step guide on how to create JWT in FastAPI?

FAQ

Is the CORS issue caused by the frontend?

No, CORS issues are not caused by frontend code. They occur because the browser blocks requests based on CORS permissions sent by the backend server.

Would I still get the CORS error if the protocol is different?

Yes, the origin https://www.example.com is not the same as http://www.example.com, because both origins have different protocols. Always make sure the protocol defined in the CORS permission matches with the frontend application protocol.

Can CORS also arise in development mode?

Yes, CORS issues can also arise in development mode, if the frontend application and the backend server are different ports. You need to define the CORS permissions in the development mode also.

Conclusion

CORS issues in FastAPI are common but easy to fix once you understand origins, headers, and credentials. Correct configuration ensures smooth communication between frontend and backend without browser blocking.