Error when Access to XMLHttpRequest at ‘http://…’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request in corydolphin Flask-CORS

Explanation of the problem

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for error when access to XMLHttpRequest at ‘http://…’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request in corydolphin Flask-CORS

@app.route('/user/', methods=['GET'])

However, if the frontend is requesting the url ‘/user’, this can cause the flask server to return a 308 redirect response, which is not allowed by the CORS preflight request.

To resolve this issue, one solution is to set strict_slashes=False in the @app.route decorator. This allows the backend to handle URLs that have or do not have a trailing slash without redirecting the client. This can also resolve the redirect response that is not allowed by the CORS preflight request. An example would be:

@app.route('/user/', methods=['GET'], strict_slashes=False)

Other popular problems with corydolphin Flask-CORS

Problem: CORS issues with preflight requests

One common issue that developers may encounter when using coryd Dolphin Flask-CORS is that preflight requests may not pass the access control check. This can result in a CORS policy error, such as “Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.” This issue may occur when the request URL does not match the URL specified in the Flask route decorator. For example, if the backend has a route specified as “@app.route(‘/user/’, methods=[‘GET’])” but the frontend is requesting “/user”, a redirect response may be returned which is not allowed by the CORS preflight request.

Solution:

To resolve this issue, ensure that the backend and frontend URLs are strictly matched. This can be achieved by modifying the backend route to match the frontend URL exactly, or by setting strict_slashes=False in the route decorator.

@app.route('/user', methods=['GET'])
# or 
@app.route('/user/', methods=['GET'], strict_slashes=False)

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

Problem: CORS issues with cookies

Another issue that developers may encounter when using coryd Dolphin Flask-CORS is that CORS issues may arise when working with cookies. This can result in errors such as “Credentials flag is ‘true’, but the ‘Access-Control-Allow-Credentials’ header is ”. It must be ‘true’ to allow credentials.”

Solution:

To resolve this issue, ensure that the “Access-Control-Allow-Credentials” header is set to “true” in the CORS configuration. Additionally, ensure that any cookies being used in the application are properly configured to handle CORS headers. This can be achieved by setting the withCredentials property to true in the axios or fetch request.

axios.post(

A brief introduction to corydolphin Flask-CORS

Coryd Dolphin Flask-CORS is a Flask extension that allows for Cross-Origin Resource Sharing (CORS) to be easily added to a Flask application. It is designed to work with the built-in flask routing and views to allow for simple handling of CORS headers. The library is lightweight, easy to use and it can be used in both development and production environments.

Flask-CORS is able to handle all the typical CORS headers, including the Origin header. It also provides support for handling preflight requests and it can be configured to suit the specific needs of a project. The library can be used to set the allowed origins, methods and headers, as well as the exposed headers. It also allows to set the max age of the preflight request and the automatic options handling. These options can be set globally, or per-route, giving the developer the flexibility to set different CORS policies for different routes in the application.

Most popular use cases for corydolphin Flask-CORS

1. coryd Dolphin Flask-CORS can be used to handle cross-origin resource sharing (CORS) in a Flask application. By applying the Flask-CORS extension to an app, developers can easily configure the CORS headers and methods that the app should allow. For example, the following code block shows how to enable CORS for all routes in an application, allowing any origin to make requests:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

2. coryd Dolphin Flask-CORS can also be used to limit the allowed origins, methods, and headers for CORS requests. For example, the following code block shows how to enable CORS only for requests from specific origins, and only for GET and POST methods:

from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": ["http://localhost:3000", "https://example.com"]}}, methods=["GET", "POST"])

3. coryd Dolphin Flask-CORS can also be used to configure different settings for different routes or resources. This allows for fine-grained control over which routes or resources are accessible to which origins, methods and headers. For example, the following code block shows how to enable CORS for all routes, but to limit the allowed methods and headers for the route ‘/secret’:

from flask_cors import CORS

app = Flask(__name__)
CORS(app)
CORS(app, resources={r"/secret/*": {"methods": ["GET"], "headers": "Content-Type"}},)