Configure CORS for Browser Clients

A browser refuses cross-origin requests by default for safety. This same-origin policy stops one site from quietly reading another.

CORS is a set of response headers that say which other origins may call your API. It opens the door on purpose.

An origin is the scheme, host, and port together. A different port or http versus https counts as a separate origin.

You rarely write the headers by hand. The Flask-CORS extension adds the right ones for you on every response.

The simplest setup wraps the whole app. Calling CORS(app) allows every origin, which is fine while learning.

In real apps you name who may call you with origins. Anything not on the list is still blocked by the browser.

You can scope CORS to a path prefix with resources. Here only your API namespace is opened to outside callers.

Under the hood the magic is Access-Control-Allow-Origin. The browser reads it to decide whether to hand the response to your code.

For some calls the browser first sends an OPTIONS preflight to ask permission. Flask-CORS answers it automatically.

To send cookies cross-origin you must set supports_credentials. Note that a wildcard origin is then no longer allowed.

Remember that CORS only guides browsers. It is not a security wall, so you still need real authentication on your API.

Choose where the CORS decision is enforced.

You saw why browsers block cross-origin calls, added Flask-CORS, restricted origins and routes, met preflight, and learned CORS is not auth. Well done!