CORS configuration with Flask-CORS - Step-by-Step Execution

Concept Flow - CORS configuration with Flask-CORS

Start Flask app

↓

Import Flask-CORS

↓

Initialize Flask app

↓

Apply CORS config

↓

Define routes

↓

Run app with CORS enabled

↓

Browser sends cross-origin request

↓

Flask-CORS adds headers

↓

Browser accepts response

↓

Request succeeds or fails based on CORS

This flow shows how Flask-CORS is imported and configured on a Flask app, enabling cross-origin requests by adding proper headers before the browser accepts the response.

Execution Sample

Flask

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=['https://example.com'])

@app.route('/')
def home():
    return 'Hello CORS!'

This code sets up a Flask app with CORS enabled only for requests from https://example.com.

Execution Table

Step	Action	Evaluation	Result
1	Import Flask and Flask-CORS	Modules imported	Ready to use Flask and CORS
2	Create Flask app instance	app = Flask(__name__)	Flask app created
3	Apply CORS with origins=['https://example.com']	CORS(app, origins=['https://example.com'])	CORS middleware added to app
4	Define route '/'	@app.route('/')	Route registered
5	Run app	app.run()	Server starts listening
6	Browser sends request from https://example.com	Request received	CORS headers added to response
7	Browser receives response	Checks CORS headers	Request allowed
8	Browser sends request from https://notallowed.com	Request received	CORS headers missing or blocked
9	Browser receives response	Checks CORS headers	Request blocked by browser

💡 Execution stops after browser blocks or allows request based on CORS headers.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
app	None	Flask app instance	Flask app with CORS middleware	Running Flask app	Running Flask app with CORS

Key Moments - 2 Insights

Why do some cross-origin requests get blocked even if Flask app is running?

Because Flask-CORS is configured to allow only specific origins (see Step 3 and Step 8). Requests from origins not in the allowed list do not get CORS headers, so browsers block them (Step 9).

What does Flask-CORS do when a request comes from an allowed origin?

It adds special headers like 'Access-Control-Allow-Origin' to the response (Step 6), which tells the browser the request is safe to accept (Step 7).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the Flask app start listening for requests?

A Step 5

B Step 3

C Step 7

D Step 1

💡 Hint

Check the 'Action' column for when 'app.run()' is called.

According to the variable tracker, what is the state of 'app' after Step 3?

A Flask app instance without CORS

B Flask app with CORS middleware

C None

D Running Flask app

💡 Hint

Look at the 'After Step 3' column for 'app' in variable_tracker.

If you add origins=['*'] in CORS config, how would Step 8 and 9 change?

A Requests from all origins would be allowed, so Step 9 would show 'Request allowed'.

B Requests from all origins would be blocked.

C No change, only https://example.com allowed.

D App would crash.

💡 Hint

Consider how origins=['*'] affects allowed origins in the execution_table steps 8 and 9.

Concept Snapshot

Flask-CORS enables cross-origin requests by adding headers.
Import CORS and apply it to your Flask app.
Use origins parameter to restrict allowed domains.
Browser blocks requests without proper CORS headers.
Run app normally; CORS works automatically on requests.

Full Transcript

This visual execution trace shows how to configure CORS in a Flask app using Flask-CORS. First, the Flask and Flask-CORS modules are imported. Then, a Flask app instance is created. Next, CORS is applied to the app with a restriction to allow only requests from https://example.com. A route is defined and the app is run. When a browser sends a request from the allowed origin, Flask-CORS adds the necessary headers, and the browser accepts the response. Requests from other origins do not get these headers and are blocked by the browser. The variable tracker shows the app's state evolving from a simple Flask instance to one with CORS middleware and running. Key moments clarify why some requests are blocked and how headers enable allowed requests. The quiz tests understanding of app state, server start, and effects of changing allowed origins.

Practice

1. What is the main purpose of using Flask-CORS in a Flask application?

easy

A. To allow or restrict cross-origin requests to the Flask app

B. To speed up the Flask app by caching responses

C. To handle database connections automatically

D. To manage user authentication and sessions

Solution

1. Step 1: Understand what CORS means

   CORS stands for Cross-Origin Resource Sharing, which controls which websites can access resources from your Flask app.

2. Step 2: Identify Flask-CORS role

   Flask-CORS is a tool to add headers that allow or restrict these cross-origin requests easily.

3. Final Answer:

   To allow or restrict cross-origin requests to the Flask app -> Option A

4. Quick Check:

   CORS controls access = A [OK]

Hint: Remember CORS controls cross-site access permissions [OK]

Common Mistakes:

• Confusing CORS with caching or authentication
• Thinking Flask-CORS speeds up the app
• Assuming Flask-CORS manages databases

2. Which of the following is the correct way to enable CORS for all routes in a Flask app using Flask-CORS?

easy

A. from flask_cors import CORS
app = Flask(__name__)
CORS()

B. from flask_cors import CORS
app = Flask(__name__)
app.enable_cors()

C. from flask_cors import CORS
app = Flask(__name__)
CORS(app)

D. from flask_cors import CORS
app = Flask(__name__)
CORS(app, origins='none')

Solution

1. Step 1: Import and create Flask app

   Import CORS from flask_cors and create the Flask app instance.

2. Step 2: Enable CORS on the app

   Call CORS(app) to enable CORS for all routes. This is the correct syntax.

3. Final Answer:

   from flask_cors import CORS\napp = Flask(__name__)\nCORS(app) -> Option C

4. Quick Check:

   Enable CORS by passing app to CORS() [OK]

Hint: Use CORS(app) to enable CORS globally [OK]

Common Mistakes:

• Calling CORS() without app argument
• Using non-existent app.enable_cors() method
• Setting origins='none' disables all CORS

3. Given this Flask app code snippet, what will be the CORS behavior for the route /data?

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=['https://example.com'])

@app.route('/data')
def data():
    return jsonify({'key': 'value'})

medium

A. Only localhost can access /data cross-origin

B. All origins can access /data without restriction

C. No origins can access /data due to missing CORS headers

D. Only requests from https://example.com will be allowed cross-origin access

Solution

1. Step 1: Check CORS configuration

   CORS is enabled with origins=['https://example.com'], so only that origin is allowed cross-origin access.

2. Step 2: Understand route behavior

   The /data route returns JSON and inherits the CORS policy set on the app.

3. Final Answer:

   Only requests from https://example.com will be allowed cross-origin access -> Option D

4. Quick Check:

   Origins list limits access = A [OK]

Hint: Origins list restricts which sites can access [OK]

Common Mistakes:

• Assuming all origins are allowed by default
• Thinking CORS disables all access without explicit allow
• Confusing localhost with example.com

4. Identify the error in this Flask app CORS setup:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(origins='*')

@app.route('/')
def home():
    return 'Hello'

medium

A. CORS is called without passing the Flask app instance

B. The origins parameter '*' is invalid and causes an error

C. The route function home() must return JSON for CORS to work

D. Flask app instance must be created after calling CORS

Solution

1. Step 1: Check how CORS is called

   CORS() is called without passing the app instance, so it does not enable CORS on the app.

2. Step 2: Understand consequences

   Without passing app, no CORS headers are added, so cross-origin requests will fail.

3. Final Answer:

   CORS is called without passing the Flask app instance -> Option A

4. Quick Check:

   Pass app to CORS() to enable it [OK]

Hint: Always pass app instance to CORS() [OK]

Common Mistakes:

• Forgetting to pass app to CORS()
• Thinking '*' is invalid (it's valid)
• Believing CORS requires JSON response

5. You want to allow CORS only on the route /api/data for requests from https://trusted.com. Which Flask-CORS setup correctly achieves this?

hard

A. CORS(app, resources={r'/api/*': {'origins': '*'}})

B. CORS(app, resources={r'/api/data': {'origins': 'https://trusted.com'}})

C. CORS(app, origins='https://trusted.com')

D. CORS(app, resources={r'/api/data': {'origins': '*'}})

Solution

1. Step 1: Understand resource-specific CORS

   To restrict CORS to a specific route, use the resources parameter with a route pattern and origins.

2. Step 2: Match the route and origin

   CORS(app, resources={r'/api/data': {'origins': 'https://trusted.com'}}) correctly sets CORS only on '/api/data' with origins 'https://trusted.com'.

3. Final Answer:

   CORS(app, resources={r'/api/data': {'origins': 'https://trusted.com'}}) -> Option B

4. Quick Check:

   Use resources to limit routes and origins [OK]

Hint: Use resources dict to target specific routes [OK]

Common Mistakes:

• Setting origins globally instead of per route
• Using wildcard '*' when only one origin is needed
• Using wrong route pattern like '/api/*' for exact match