• 22-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing 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

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

Lightrun Team
Lightrun Team
22-Jan-2023

Explanation of the problem

The problem at hand is related to a CORS (Cross-Origin Resource Sharing) error that is occurring when using axios in a React application with a Redux-Saga middleware to post a multipart/form-data request to a server. The error message states that the request has been blocked by the CORS policy and that the response to the preflight request did not pass the access control check.

The issue is related to the server-side configuration, specifically the Flask-CORS package. The developer is using a dead simple configuration for the package, with no additional options passed to it. However, it seems that this is not sufficient to allow the preflight request to pass the access control check.

The developer is also not using cookies in the application. The solution is not clear and the developer is asking for help on what might be missing in the configuration.

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

When using axios in redux-saga in a react application to send a multipart/form-data request to a backend server, a CORS policy error can be encountered. The error message states that “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.” One of the causes of this issue is an unmatch between the request url on the frontend and backend.

For example, in a flask backend, the url may be defined as such:

@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)

This will make the backend accept requests to the url ‘/user’ and ‘/user/’ without redirecting the client.

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)

Problem: CORS headers not being set correctly

Another issue that developers may encounter when using coryd Dolphin Flask-CORS is that CORS headers are not being set correctly. This can result in errors such as “No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” This issue may occur when the CORS configuration is not set up correctly, or if the application is not properly configured to handle CORS headers.

Solution:

To resolve this issue, ensure that the CORS configuration is set up correctly in the Flask application. This can be achieved by properly configuring the coryd Dolphin Flask-CORS package, including setting the allowed origins, methods, and headers.

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)
  1. 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"])
  1. 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"}},)
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications. It’s a registration form away.

Get Lightrun

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.