How To Fix CORS Issues In FastAPI? | Web Engineering Notes
How To Fix CORS Issues In FastAPI?
Feb 11, 2026
CORSFastAPI
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.
Related Articles
FastAPI + SQLAlchemy Tutorial: Build a CRUD API Step-by-Step for Beginners
This tutorial teaches beginners how to build a CRUD API with FastAPI and SQLAlchemy. You’ll learn project setup, database connection, models, Pydantic schemas, CRUD functions, API routes, and testing using Swagger UI. By the end, you will have a fully functional backend API ready to use.
Next.js + FastAPI Tutorial: Connect Frontend to Backend Step-by-Step
In this tutorial, you will learn how to connect a Next.js frontend to a FastAPI backend. We will build a simple full-stack application where the frontend fetches data from an API and displays it in the UI. You will also learn how to handle CORS, fetch API data, and understand how frontend and backend communicate in modern web applications.
Subscribe to get the latest articles delivered directly to your inbox.
js
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.
python
from fastapi import FastAPIfrom fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()# Example Originsorigins = ["http://localhost:3000","https://www.example.com"]app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"],)
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:
js
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:
js
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' headerin 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:
js
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:
js
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:
js
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 allowedby 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.