CORS configuration with Flask-CORS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing a Flask route with CORS enabled for all origins?

Consider a Flask app with Flask-CORS configured to allow all origins. What will be the value of the Access-Control-Allow-Origin header in the response when a browser sends a cross-origin request?

Flask

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

# Assume a browser sends a cross-origin GET request to '/'

A "Access-Control-Allow-Origin" header is set to "*"

B "Access-Control-Allow-Origin" header is missing

C "Access-Control-Allow-Origin" header is set to the requesting origin only if it matches a whitelist

D "Access-Control-Allow-Origin" header is set to "null"

💡 Hint

Think about what happens when you enable CORS without restrictions.

When Flask-CORS is initialized with default settings (CORS(app)), it allows all origins by setting the Access-Control-Allow-Origin header to '*'. This means any website can access the resource.

📝 Syntax

intermediate

Which Flask-CORS configuration syntax correctly restricts CORS to only 'https://example.com'?

You want to configure Flask-CORS to allow cross-origin requests only from 'https://example.com'. Which code snippet correctly achieves this?

A CORS(app, origins='https://example.com')

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

C CORS(app, origin='https://example.com')

D CORS(app, allow_origin='https://example.com')

💡 Hint

Check the parameter name and its expected type in Flask-CORS docs.

The correct parameter is 'origins' and it expects a list or string. Using a list with one origin is the recommended way.

🔧 Debug

advanced

Why does this Flask-CORS setup fail to add CORS headers to a blueprint route?

Given the code below, why does the route '/api/data' not include CORS headers in the response?

Flask

from flask import Flask, Blueprint, jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/api/users/*": {"origins": "*"}})

api_bp = Blueprint('api', __name__, url_prefix='/api')

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

app.register_blueprint(api_bp)

A The route returns a dictionary instead of a string, causing CORS headers to be skipped

B CORS was applied to app but not explicitly to the blueprint, so blueprint routes lack CORS headers

C The origins pattern in resources is incorrect and does not match '/api/data'

D The blueprint was registered after CORS initialization, so CORS does not apply to it

💡 Hint

Check if the resource pattern matches the full request path including the blueprint url_prefix.

Flask-CORS only adds CORS headers for request paths that match the specified resource patterns. The pattern r'/api/users/*' does not match '/api/data', so no CORS headers are added.

🧠 Conceptual

advanced

What is the effect of setting 'supports_credentials=True' in Flask-CORS?

In Flask-CORS, what does setting the parameter supports_credentials=True do to the CORS response headers?

A It adds the header 'Access-Control-Allow-Credentials: true' allowing cookies and credentials in cross-origin requests

B It sets 'Access-Control-Allow-Origin' to '*' regardless of origin

C It disables CORS for all routes to prevent credential leaks

D It automatically adds authentication headers to all responses

💡 Hint

Think about how browsers handle cookies and credentials in cross-origin requests.

Setting supports_credentials=True adds the Access-Control-Allow-Credentials header with value true, which tells browsers to allow sending cookies and credentials in cross-origin requests.

❓ state_output

expert

What is the value of the 'Access-Control-Allow-Origin' header after this Flask-CORS configuration?

Given the Flask app below, what will be the value of the 'Access-Control-Allow-Origin' header in the response to a cross-origin request from 'https://evil.com'?

Flask

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["https://trusted.com", "https://partner.com"])

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

# A browser from 'https://evil.com' sends a cross-origin request to '/'

A 'Access-Control-Allow-Origin' is set to 'https://trusted.com'

B 'Access-Control-Allow-Origin' is set to 'https://evil.com'

C 'Access-Control-Allow-Origin' is set to '*'

D No 'Access-Control-Allow-Origin' header is included in the response

💡 Hint

Consider how Flask-CORS handles origins not in the allowed list.

If the request origin is not in the allowed origins list, Flask-CORS does not add the Access-Control-Allow-Origin header, so the browser blocks the response for cross-origin requests.

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