Making POST requests to Flask and getting back data

Question

I have a React app that makes a POST request to a Flask backend. The POST request is designed to alter some data in a database and send back a calculated value. Everything seems to work on the Flask side except for the response. The response I get from Flask is:

Response { type: "cors", 
url: "http://127.0.0.1:3122/update", 
redirected: false, 
status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }

I'm not sure what I'm doing wrong. In my Flask code, I use in the function decorated by @app.after_request

response.headers.add('Access-Control-Allow-Origin', '*')
response.headers.add('Access-Control-Allow-Headers', 'Content-Type,text/plain')
response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')

and also the flask_cors package to allow for CORS from the client side.

app = Flask(__name__)
app.config['DEBUG'] = True
api = CORS(app, resources={r"/*": {"origins": "*"}})

I've also tried to set the mimetype in my response from Flask to be text/plain so a pre-flight request isn't invoked.

resp = Response(response=calculation_json,
                status=200,
                mimetype='text/plain')

The POST request code is:

(async () => {
    const rawResponse = await
        fetch(url, {
                        method: 'POST',
                        headers: {
                              'Accept': 'text/plain',
                              'Content-Type': 'text/plain'
                            },
                        body: jsonData
      });

      const response = await rawResponse;

        if (response.status >= 200 && response.status < 300) {
            console.log(response);
            return Promise.resolve(response)
        } else {
            this.props.form.resetFields();
            return Promise.reject(new Error(response.statusText))
        }

The response is 200 with body= false which matches ur if in post request. What is the expected response? — salah-1, Nov 04 '18 at 04:04
@Salah-1 I cannot see anywhere in Flask docs to add data to the response data from Flask — Black, Nov 04 '18 at 21:30
@Salah-1 the expected response is `calculated_json` into the client — Black, Nov 05 '18 at 03:42
long time ago but were you able to figure this out, have the exact problem — Ken, Jan 17 '21 at 11:08

score 0 · Answer 1 · answered Nov 04 '18 at 00:57

In case if for client side of your application you have use create-react-app, you can add a proxy configuration in package.json file.

"proxy": {
    "/apiRoute": {
      "target": "http://127.0.0.1:3122"
    },
  },

The /apiRoute is the name of the routes (GET, POST, PUT..) you had defined in Flask. So i would suggest to make a pattern in Flask for all routes like /api/**, so in package.json instead of adding all routes, you can something like below

"proxy": {
  "/api/*": {
     "target": "http://127.0.0.1:3122"
   },
 },

I've tried to add a proxy as `"proxy": { "/*": { "target": "http://127.0.0.1:3122" }, },` — Black, Nov 04 '18 at 21:41

score 0 · Answer 2 · answered Nov 05 '18 at 03:52

0

You would have to change your response code such that it returns data not just regular http 200. In this case looks like you want Json back.

See the examples: Return JSON response from Flask view

answered Nov 05 '18 at 03:52

salah-1

1,299
11
15

I tried changing to `resp = jsonify(calculation_json)` which from the docs should work but I still get the same message. I'm trying to get the response body to be `calculation_json` – Black Nov 05 '18 at 05:23
What’s the data type of calculation_json? Is it int or string or else – salah-1 Nov 05 '18 at 05:42
Also, use dev tools to inspect the calls to see what’s returned. At the flask code, print the data before the return statement to see what’s gonna be returned – salah-1 Nov 05 '18 at 05:44
It's JSON with string keys and values. I can see what needs to be returned, will try to use more tools than web console – Black Nov 07 '18 at 01:11

Making POST requests to Flask and getting back data

2 Answers2