Secure Your API: Implementing CORS Handling in Python

Cross-Origin Resource Sharing (CORS) is a crucial security mechanism that restricts web pages from making requests to a different domain than the one which served the web page. This challenge asks you to implement a simple Flask-based API and configure it to handle CORS requests correctly, allowing requests from a specified origin. Properly configuring CORS is essential for modern web applications that interact with APIs hosted on different domains.

Problem Description

You are tasked with creating a Flask API endpoint that serves data. This API needs to be accessible from a frontend application running on a different domain (e.g., http://localhost:3000). You must implement CORS handling to allow requests originating from this frontend domain while preventing unauthorized access from other origins.

Specifically, you need to:

1. Create a Flask application: This application should have at least one endpoint (e.g., /data) that returns a simple JSON response.
2. Implement CORS middleware: Use the flask_cors library to configure CORS for your application. You must allow requests from a specific origin (e.g., http://localhost:3000).
3. Handle different HTTP methods: Ensure your CORS configuration allows for common HTTP methods like GET, POST, PUT, and DELETE. For this challenge, focus on allowing GET requests.
4. Test the implementation: Verify that requests from the allowed origin are successful, and requests from other origins are blocked (or return an appropriate CORS error).

Examples

Example 1:

Input: A frontend application running at http://localhost:3000 makes a GET request to http://localhost:5000/data.
Output: The API returns a JSON response (e.g., `{"message": "Hello from the API!"}`). The browser's network tab shows a successful request with the correct CORS headers.
Explanation: The CORS middleware allows the request from http://localhost:3000 because it's the configured allowed origin.

Example 2:

Input: A frontend application running at http://localhost:4000 makes a GET request to http://localhost:5000/data.
Output: The browser's network tab shows a CORS error. The server might log a CORS error as well.
Explanation: The CORS middleware blocks the request from http://localhost:4000 because it's not the configured allowed origin.

Example 3: (Edge Case - No Origin Header)

Input: A request is made to http://localhost:5000/data without an Origin header.
Output: The API returns a JSON response (e.g., `{"message": "Hello from the API!"}`). The browser's network tab shows a successful request with the correct CORS headers.
Explanation:  While less common, the `flask_cors` library handles requests without an Origin header gracefully, allowing them by default.

Constraints

• The API must be built using Flask.
• You must use the flask_cors library for CORS handling.
• The allowed origin must be configurable (e.g., through an environment variable or a constant). For simplicity, hardcoding http://localhost:3000 is acceptable for this challenge.
• The API should handle GET requests.
• The API should return a JSON response.
• The solution should be well-structured and readable.

Notes

• Consider using environment variables to store the allowed origin for better configuration management.
• The flask_cors library provides various options for configuring CORS. Refer to its documentation for more details: https://flask-cors.readthedocs.io/en/latest/
• Debugging CORS issues can be tricky. Use your browser's developer tools (Network tab) to inspect the request headers and response headers to understand what's happening. Pay close attention to the Access-Control-Allow-Origin header.
• Remember that CORS is a browser-level security mechanism. It does not protect against all types of attacks.