CORS (Cross-Origin Resource Sharing)¶

CORS or "Cross-Origin Resource Sharing" refers to the situations when a frontend running in a browser has JavaScript code that communicates with a backend, and the backend is in a different "origin" than the frontend.

Origin¶

An origin is the combination of protocol (http,https), domain (myapp.com,localhost,localhost.tiangolo.com), and port (80,443,8080).

So, all these are different origins:

• http://localhost
• https://localhost
• http://localhost:8080

Even if they are all inlocalhost, they use different protocols or ports, so, they are different "origins".

Steps¶

So, let's say you have a frontend running in your browser athttp://localhost:8080, and its JavaScript is trying to communicate with a backend running athttp://localhost (because we don't specify a port, the browser will assume the default port80).

Then, the browser will send an HTTPOPTIONS request to the:80-backend, and if the backend sends the appropriate headers authorizing the communication from this different origin (http://localhost:8080) then the:8080-browser will let the JavaScript in the frontend send its request to the:80-backend.

To achieve this, the:80-backend must have a list of "allowed origins".

In this case, the list would have to includehttp://localhost:8080 for the:8080-frontend to work correctly.

Wildcards¶

It's also possible to declare the list as"*" (a "wildcard") to say that all are allowed.

But that will only allow certain types of communication, excluding everything that involves credentials: Cookies, Authorization headers like those used with Bearer Tokens, etc.

So, for everything to work correctly, it's better to specify explicitly the allowed origins.

UseCORSMiddleware¶

You can configure it in yourFastAPI application using theCORSMiddleware.

• ImportCORSMiddleware.
• Create a list of allowed origins (as strings).
• Add it as a "middleware" to yourFastAPI application.

You can also specify whether your backend allows:

• Credentials (Authorization headers, Cookies, etc).
• Specific HTTP methods (POST,PUT) or all of them with the wildcard"*".
• Specific HTTP headers or all of them with the wildcard"*".

fromfastapiimportFastAPIfromfastapi.middleware.corsimportCORSMiddlewareapp=FastAPI()origins=["http://localhost.tiangolo.com","https://localhost.tiangolo.com","http://localhost","http://localhost:8080",]app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["*"],allow_headers=["*"],)@app.get("/")asyncdefmain():return{"message":"Hello World"}

The default parameters used by theCORSMiddleware implementation are restrictive by default, so you'll need to explicitly enable particular origins, methods, or headers, in order for browsers to be permitted to use them in a Cross-Domain context.

The following arguments are supported:

• allow_origins - A list of origins that should be permitted to make cross-origin requests. E.g.['https://example.org', 'https://www.example.org']. You can use['*'] to allow any origin.
• allow_origin_regex - A regex string to match against origins that should be permitted to make cross-origin requests. e.g.'https://.*\.example\.org'.
• allow_methods - A list of HTTP methods that should be allowed for cross-origin requests. Defaults to['GET']. You can use['*'] to allow all standard methods.
• allow_headers - A list of HTTP request headers that should be supported for cross-origin requests. Defaults to[]. You can use['*'] to allow all headers. TheAccept,Accept-Language,Content-Language andContent-Type headers are always allowed forsimple CORS requests.

• allow_credentials - Indicate that cookies should be supported for cross-origin requests. Defaults toFalse.

  None ofallow_origins,allow_methods andallow_headers can be set to['*'] ifallow_credentials is set toTrue. All of them must beexplicitly specified.

• expose_headers - Indicate any response headers that should be made accessible to the browser. Defaults to[].

• max_age - Sets a maximum time in seconds for browsers to cache CORS responses. Defaults to600.

The middleware responds to two particular types of HTTP request...

CORS preflight requests¶

These are anyOPTIONS request withOrigin andAccess-Control-Request-Method headers.

In this case the middleware will intercept the incoming request and respond with appropriate CORS headers, and either a200 or400 response for informational purposes.

Simple requests¶

Any request with anOrigin header. In this case the middleware will pass the request through as normal, but will include appropriate CORS headers on the response.

More info¶

For more info aboutCORS, check theMozilla CORS documentation.