Allowing CORS request with Flask and React

Active3 hr before
Viewed126 times

9 Answers


To enable CORS in GET responses on the server, you can simply add a header in response: ,After response.headers.add("Access-Control-Allow-Origin", "*") , all GET requests will be accepted.,But without CORS enabled, the browser will block the server's response for security reasons. To receive data using a React application, CORS must be enabled.

from flask
import Flask, jsonify

@app.route("/", methods = ["GET"])
def get_example():
"GET in server"
response = jsonify(message = "Simple server is running")
return response

@app.route("/", methods = ["POST"])
def post_example():
"POST in server"
return jsonify(message = "POST request returned")

if __name__ == "__main__": = "", port = "5000", debug = True)
load more v

Stack Overflow Public questions & answers ,I am trying to connect a client with a server via ajax requests., Meta Stack Overflow

As the error suggest, you're missing the protocol name in your request. Try to add it at the start of the string :

const baseUrl = 'http://localhost:5000'

Stackoverflow — No ‘Access-Control-Allow-Origin’ header is present on the requested resource — when trying to get data from a REST API,Now you should see the username shown on the screen by accessing http://localhost:3000. Congratulations!,The Flask app is run on port 5000 in default. Now you can fetch the data from your server:

The server should add the following headers to the response: Access-Control-Allow-Origin, Access-Control-Allow-Headers and Access-Control-Allow-Methods. These headers tell the browser that you are trusted by the server owner so you can request resources from your domain. Notice that this is just the response for the preflight request. For the actual POST requests you make, the server still needs to add Access-Control-Allow-Origin header to the response. Most people would recommend using a package called flask-cors. What it does is acting as a middleware that adds some headers to your response so the browser know you are trusted by the server and thus you can ask for resources. However, it doesn’t work for me somehow. I didn’t look into its implementations so I didn’t know the reason. If you are facing the same problem like me, you can manually add these headers to the response with just two functions:

def build_preflight_response(): response = make_response() response.headers.add("Access-Control-Allow-Origin", "*") response.headers.add('Access-Control-Allow-Headers', "*") response.headers.add('Access-Control-Allow-Methods', "*") return responsedef build_actual_response(response): response.headers.add("Access-Control-Allow-Origin", "*") return response
load more v

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS request did not succeed).,This content was originally published by Mark at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there., New Notes and Comments Functionality Rolling Out to Excel on the Web August 19, 2021

output from the console:

Uncaught( in promise) Error: Request aborted
load more v

A Flask extension for handling Cross Origin Resource Sharing (CORS), making cross-origin AJAX possible.,This package exposes a Flask extension which by default enables CORS support on all routes, for all origins and methods. It allows parameterization of all CORS headers on a per-resource level. The package also contains a decorator, for those who prefer this approach.,Alternatively, you can specify CORS options on a resource and origin level of granularity by passing a dictionary as the resources option, mapping paths to a set of options. See the full list of options in the documentation.

$ pip install - U flask - cors
load more v

In this guide, you will learn about cross-origin resource sharing (CORS) and the role of the "Allow Access Control Origin" header. With the knowledge gained in this guide, you will find it easy to resolve issues relating to CORS.,And that's it! In this guide, you got to understand what cross-origin resource sharing is and how browsers handle cross-origin requests. To read more on how to handle this in Create-React-App, visit the Official Documentation to learn more. ,According to Wikipedia, "Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served."

1 Origin: https: //
load more v

I am trying to redirect to react app to "" when an endpoint on the flask app is hit. But I am getting 'No "Access-Control-Allow-Origin" header is present on the requested resource.'. I have searched on stackoverflow and google but I can not find something useful.,On your respond header you need to set Access-Contol-Allow-Origin: ”*” or to your domain. Check

 Pretag team - issue, fix, solve, resolve

Lines 10–12: the @app.route decorator tells Flask which URL should trigger our serve(path) function. Lastly, send_from_directory allows us to send our “index.html” file from our “frontend/build” directory.,In your app.js file, make the following changes to test our GET request to our flask back-end.,Next, in the frontend directory, run npm run build:

According to your own requirements, you might need to install the necessary python packages beforehand. I used pip to install all the packages that I need and did not use a virtual environment (even though that’s highly recommended). To create a new python virtual environment called venv (you can call this something else — just replace the last venv in the command below with your own venv name), run:

python - m venv venv
load more v

One solution to this problem is to create an Apigee API proxy that calls the service API on the back end. Remember that Edge sits between the client (a browser in this case) and the backend API (the service). Because the API proxy executes on the server, not in a browser, it is able to call the service successfully. Then, all you need to do is attach CORS headers to the TargetEndpoint response. As long as the browser supports CORS, these headers signal to the browser that it's okay to "relax" its same-origin policy, allowing the cross-origin API call to succeed.,The Add CORS policy is implemented as an AssignMessage policy, which adds the appropropriate headers to the response. Basically, the headers let the browser know which origins it will share its resources with, which methods it accepts, and so on. You can read more about these CORS headers in the Cross-Origin Resource Sharing W3C Recommendation.,The following JQuery code calls a fictitious target service. If executed from within the context of a browser (a web page), the call will fail because of the same-origin policy:

<PreFlow name="PreFlow">
         <Condition>request.verb != "OPTIONS"</Condition>
   <Response />
load more v

Other "flask-react" queries related to "Allowing CORS request with Flask and React"