1

I have developed few REST API - GET & POST in Python Flask and these are called from REACT JS using fetch() method. The GET call works fine & able to fetch data in Postman & browser console. However, The POST call works on postman but gives 400 status code in browser console :

POST http://127.0.0.1:5000/fc/FC001 net::ERR_ABORTED 400 (BAD REQUEST))

Note : The above API works perfectly fine when I'm using postman

REACT JS code :

const postFcByRequestNumber = async (RequestNumber, url, name, city) => {
    const apiUrl = "http://127.0.0.1:5000/fc/" + RequestNumber;
    await fetch(apiUrl, {
        method: "POST",
        mode: "no-cors",
        body: JSON.stringify({
            "url": url,
            "name": name,
            "city": city,
        }),
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
              /* Tried below changes, but nothing worked */
            // "Content-Type": "application/json"
            //"Accept": "application/json",
            // "Accept-Encoding": "gzip, deflate, br",
        },
    })
        .then((response) => response.json())
        .then((data) => {
            console.log("Response for postFcByRequestNumber {FC001} is :", data);
        })
        .catch((err) => {
            console.log(err.message);
        });
};

Below is the Python code running on FLASK:

@app.post("/fc/<requestNumber>")
#@app.route("/fc/<requestNumber>", methods=["POST"])
def post_fc_by_requestNumber(requestNumber):
    if (not request.view_args['requestNumber']):
        return "Please send requestNumber.", 401
    if request.is_json:
        newRequest = request.get_json()
        newRequest["id"] = _find_next_request_id()
        newRequest["requestNumber"] = request.view_args['requestNumber']
        existingRequests.append(newRequest)
        response = jsonify(newRequest)
        # Enable Access-Control-Allow   -Origin
        response.headers.add("Access-Control-Allow-Origin", "*")
        return response, 201
    return {"error": "Bad Request : Request must be JSON."}, 400

**Note : Even if I tried doing following changes, it doesn't have any impact & still returns 400 status code.

  1. Removed the last return statement (so that to prevent returning 404 explicitly)
  2. Removed path parameter "requestNumber" from the url from both Python & React code
  3. Removed "cors" statement from the response headers in python code There is no impact, it still returns 404**

Also, I observed that the content-type in request header is going as "text/plain" in browser console whereas it should be "application/json" as sent via postman call. I think this is the issue.

So, I have manually added "Content-Type": "application/json; charset=UTF-8" in header section but why it is still taking "text/plain" in browser console.

Request Headers : 
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 58
**Content-Type: text/plain;charset=UTF-8**
Host: 127.0.0.1:5000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site

Please suggest.

1 Answer 1

1

I got it working. I was very close to it earlier as I mentioned about cors & header properties in fetch() method of React JS earlier.

Reason for error : As mode is set as "no-cors" , so it doesn't override properties specified in header section like "content-type".

Solution: We need to forcefully set mode: "cors" then only it would pick properties specified in headers as below :

            "Content-Type": "application/json; charset=UTF-8"

If anyone knows more details, please share.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.