fetch api return wrong response object

Question

I am posting request to my backend server using fetch api in React js

const formData = new FormData();
    formData.append("image", file);
    formData.append("userId", currentUser.id);
    formData.append("sliderNumber", sliderNumber);

    const myHeaders = new Headers();
    myHeaders.append("Content-Type", file.type);
    myHeaders.append("Aceess-Control-Allow-Origin", "*");

    fetch("http://localhost:4000/upload/slide-image", {
      method: "POST",
      headers: myHeaders,
      mode: "no-cors",
      body: formData
    })
      .then(response => response)
      .then(data => console.log("Printing data: ", data));
  };

In elixir backend

def upload(conn, params) do
  # uploading code 

  #send response to the client with amazon s3 image url
  send_resp(conn, 200, image_url)
end

but Response object from fetch api is empty

Response {
  body: null
  bodyUsed: false
  headers: Headers {}
  ok: false
  redirected: false
  status: 0
  statusText: ""
  type: "opaque"
  url: ""
}

And it doesn't change when I respond with status code 400.

It seems like fetch api is not building Reponse object correctly in some point. Because I can find correct status code and response body in browser network tab. But Response object doesn't hold response from backend server.

Any idea?

When you use "mode": "no-cors", not all headers you specify are allowed. Check developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch for more info. Since in headers you are allowing cors, i think you probably mean to remove the "mode": "no-cors" bit. Also, you probably mean something else with .then(response => response). — André Santos
– André Santos, Commented Apr 24, 2020 at 21:36

Michalis Garganourakis · Accepted Answer · 2020-04-24 21:57:33Z

If you are expecting a text response from your server, then on your first .then(.. you should do like:

fetch("http://localhost:4000/upload/slide-image", {
      method: "POST",
      headers: myHeaders,
      mode: "no-cors",
      body: formData
    })
      .then(response => response.text()) // <--- 
      .then(data => console.log("Printing data: ", data));

fetch returns a Promise that resolves to a Response. When you use .text() at this stage, what you actually do is to take the Response stream, read it to completion and return a promise that will resolve with a text.

Aside from that, you also use mode: "no-cors" (as other users mentioned on their answers) that limits you in many ways. For example, even if you follow my instructions above, you will get an empty string, even if you are trying to return something from your server. And that will be because of this mode.

You can find more details about it here, under bullet no-cors.

Robo Robok · Accepted Answer · 2020-04-24 21:28:38Z

3

Your Content-Type is wrong. When sending files along with other data, the Content-Type should still be multipart/form-data.

answered Apr 24, 2020 at 21:28

Robo Robok

23.1k22 gold badges84 silver badges146 bronze badges

Comments

Quentin · Accepted Answer · 2020-04-24 21:36:54Z

1

 mode: "no-cors",

You set the mode to no-cors, so the response is Opaque, which means you can't see inside it.

Don't do that if you need to read the response.

Asides:

myHeaders.append("Content-Type", file.type);

That's the wrong content-type for a form data object. Don't set the content-type. The fetch API will set the correct one automatically.

   myHeaders.append("Aceess-Control-Allow-Origin", "*");

Access-Control-Allow-Origin, which you misspelt, is a response header, not a request header.

.then(response => response)

Returning the response unchanged is rather pointless. You probably want response.text() if you are getting a plain URL back.

edited Apr 24, 2020 at 21:36

answered Apr 24, 2020 at 21:31

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Shawn Xia · Accepted Answer · 2021-03-23 19:18:31Z

0

The accepted answer solved my pinpoint.

if you are expecting a JSON object from the backend, use

.then((response) => response.json())

answered Mar 23, 2021 at 19:18

Shawn Xia

1

Collectives™ on Stack Overflow

fetch api return wrong response object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related