получить api вернуть неправильный объект ответа - PullRequest
Новая
       10

получить api вернуть неправильный объект ответа

0 голосов
/ 25 апреля 2020

Я отправляю запрос на свой сервер, используя fetch api в 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));
  };

В 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

, но объект Response из fetch api пуст 

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

И это не меняется, когда я отвечаю с кодом состояния 400.

Кажется, что fetch api не создает объект Reponse правильно в какой-то момент. Потому что я могу найти правильный код состояния и тело ответа на вкладке сети браузера. Но объект Response не содержит ответ от внутреннего сервера.

Есть идеи?

Ответы [ 3 ]

3 голосов
/ 25 апреля 2020

Ваш Content-Type не так. При отправке файлов вместе с другими данными значение Content-Type должно быть равно multipart/form-data.

2 голосов
/ 25 апреля 2020

Если вы ожидаете текстовый ответ от вашего сервера, то на вашем первом .then(.. вы должны сделать следующее: 

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 возвращает Обещание, которое разрешается в Response . Когда вы используете .text() на этом этапе, вы фактически берете поток ответа, читаете его до конца и возвращаете обещание, которое будет разрешено текстом.

Помимо этого, вы также используете mode: "no-cors" (как упоминали другие пользователи в своих ответах), что ограничивает вас во многих отношениях. Например, даже если вы будете следовать моим инструкциям выше, вы получите пустую строку, даже если вы пытаетесь вернуть что-то с вашего сервера. И это будет из-за этого режима.

Более подробную информацию об этом можно найти здесь , под маркером no-cors .

1 голос
/ 25 апреля 2020 
 mode: "no-cors",

Вы устанавливаете режим no-cors, поэтому ответ непрозрачен, что означает, что вы не можете видеть его внутри.

Не делайте этого, если вам нужно прочитать ответ.

В сторонах: 

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

Это неправильный контент- тип для объекта данных формы. Не устанавливайте тип контента. API выборки установит правильный автоматически. 

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

Access-Control-Allow-Origin, который вы ошиблись, является заголовком response , а не заголовком запроса. 

.then(response => response)

Возвращать ответ без изменений довольно бессмысленно. Возможно, вы захотите response.text(), если вернете простой URL.

...