# CORS protection
Cross-Origin Resource Sharing (aka CORS) is a huge topic by itself. The documentation here cannot go into enough detail about what it is. You are highly encouraged to do some research on your own to understand the security problem presented by it, and the theory behind the solutions. MDN Web Docs (opens new window) are a great first step.
In super brief terms, CORS protection is a framework that browsers use to facilitate how and when a web page can access information from another domain. It is extremely relevant to anyone building a single-page application. Often times your frontend might be on a domain like
https://portal.myapp.com, but it needs to access the backend from
The implementation here is heavily inspired by
sanic-cors (opens new window), which is in turn based upon
flask-cors (opens new window). It is therefore very likely that you can achieve a near drop-in replacement of
# Basic implementation
As shown in the example in the auto-endpoints example, Sanic Extensions will automatically enable CORS protection without further action. But, it does not offer too much out of the box.
At a bare minimum, it is highly recommended that you set
config.CORS_ORIGINS to the intended origin(s) that will be accessing the application.
from sanic import Sanic, text from sanic_ext import Extend app = Sanic(__name__) app.config.CORS_ORIGINS = "http://foobar.com,http://bar.com" Extend(app) @app.get("/") async def hello_world(request): return text("Hello, world.")
$ curl localhost:8000 -X OPTIONS -i HTTP/1.1 204 No Content allow: GET,HEAD,OPTIONS access-control-allow-origin: http://foobar.com connection: keep-alive
The true power of CORS protection, however, comes into play once you start configuring it. Here is a table of all of the options.
| || || ||The list of headers that will appear in |
| || || ||When |
| || || ||When the incoming preflight request is received, whether to automatically set values for |
| || || ||Specific list of headers to be set in |
| || || ||The maximum number of seconds the preflight response may be cached using the |
| || || ||The HTTP methods that the allowed origins can access, as set on the |
| || || ||The origins that are allowed to access the resource, as set on the |
| || || ||If |
| || || ||Whether to set the |
| || || ||Whether to add |
For the sake of brevity, where the above says
List[str] any instance of a
tuple will be acceptable. Alternatively, if the value is a
str, it can be a comma delimited list.
# Route level overrides
It may sometimes be necessary to override app-wide settings for a specific route. To allow for this, you can use the
@sanic_ext.cors() decorator to set different route-specific values.
The values that can be overridden with this decorator are:
from sanic_ext import cors app.config.CORS_ORIGINS = "https://foo.com" @app.get("/", host="bar.com") @cors(origins="https://bar.com") async def hello_world(request): return text("Hello, world.")