Reputation: 63
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.
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.
Upvotes: 1
Views: 903
Reputation: 63
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.
Upvotes: 1