Cant get desired response in react js from flask api

Question

I am using the fetch library from reactjs for getting and pushing data to/from my flask API. But can't get the desired response from the my api.

This is my flask api:

@app.route('/adduser',methods=['POST'])
    def indx():
    data=request.get_json(force=True)
    email=request.get_json()["email"]
    password=request.get_json()['password']
    try:
        auth.create_user_with_email_and_password(email,password)
    except:
        userexists="User Already Exists"
    try:
        user=auth.sign_in_with_email_and_password(email,password)
        id = auth.get_account_info(user['idToken'])
        db.child("users").push(id)
    except:
        invalidCredentials="Wrong Credentials"
    if request.get_json(force=True):
        x={
            "name":"sarmad",
            "roll":"052"
        }
        s=json.dumps(x)
        return s
    else:
        return ""

This is react js code:

fetch('http://127.0.0.1:5000/adduser', {
    mode:'no-cors',
 method: 'POST',
 headers: {
   'Accept': 'application/json',
   "Access-Control-Allow-Origin": "*",
    'Content-Type': 'application/json'
 },
 body: JSON.stringify({
   'email': this.state.email,
   password: this.state.password,
   name: this.state.name,
//    userType: userTy,
   dob:this.state.DOB,
   address:this.state.Address,
   gender:'male',
   phone:'090078601',
//    roles:roles
 })
}).then((response) => response).then((responseJson) => {
  console.log(responseJson);
 //this.setState({pressed: false});
})

I need to receive the data passed back from the Flask API either as a string or json. This is my current response back:

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …} body: (...) bodyUsed: false headers: Headers {} ok: false redirected: false status: 0 statusText: "" type: "opaque" url: "" _proto_: Response

Any help would be greatly appreciated!

Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …} body: (...) bodyUsed: false headers: Headers {} ok: false redirected: false status: 0 statusText: "" type: "opaque" url: "" _proto_: Response This is the response i get in inspect option of browser — Rana Sarmad Rajput
– Rana Sarmad Rajput, Commented Feb 8, 2019 at 15:00
Don’t use mode: 'no-cors'. See stackoverflow.com/questions/43262121/… and stackoverflow.com/questions/43317967/…. If you specify mode: 'no-cors', the browser blocks your frontend JavaScript code from accessing the response body and response headers. That’s what 'opaque' response means. — sideshowbarker
– sideshowbarker, Commented Feb 10, 2019 at 5:34

Sergey Pugach · Accepted Answer · 2019-02-08 15:01:37Z

2

Just do it with .json()

}).then((response) => response.json()).then((responseJson) => {
  console.log(responseJson);
 //this.setState({pressed: false});
})

answered Feb 8, 2019 at 15:01

Sergey Pugach

5,6691 gold badge18 silver badges34 bronze badges

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

2 Comments

Sergey Pugach Over a year ago

Check again if you put response.json() with parentheses, because it seems that you return response.json as function.

HX_unbanned Over a year ago

QA ( @rana-sarmad-rajput), did this answer fixed your issue?

Collectives™ on Stack Overflow

Cant get desired response in react js from flask api

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related