Блог

Я пытаюсь переписать свой вызов ajax для извлечения:

Ajax:

   $.post({
    context: this,
    url: "/api/v1/users",
    data: { 
      user: 
        {
          email: email,
          password: password
        } 
    }
  }).done((user) => {
  }).fail((error) => {
  })
  

Выборка:

   fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  }
  })
  .then(res => {  
    if (res.status !== 200) { {
        console.log("error")
      })          
    } else {
      res.json().then(data => {
        console.log(data)
      })
    }
  })
  

Я получаю сообщение об ошибке empty params ~ неверный запрос с моего сервера.

Я также нашел этот способ сделать это, но в приведенном ниже коде я получаю сообщение об ошибке: неожиданный токен.

   var payload = { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  };

  var data = new FormData();
  data.append( "json", JSON.stringify( payload ) );

  fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: data
  })
  

Как я могу переписать ajax-запрос на выборку?

Следил за этой темой на github: https://github.com/matthew-andrews/isomorphic-fetch/issues/34

Решение моего вопроса заключается в использовании функции JSON.stringify и установке заголовка Content-Type в application / json. Не совсем уверен, почему вторая попытка в моем вопросе не сработала.

 fetch('/api/v1/users', {  
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ "user": {
      "email" : email,
      "password" : password
    }}),
})
  

Официальная документация MDN:

 var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');

fetch('/contact-form', {
    method: 'POST',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default',
    body: JSON.stringify(fields)
}).then(() => {
    dispatch(contactFormSubmitSuccess());
});
  

TL; DR без mode: 'cors' вашего тела JSON не пройдет.

Я немного боролся с этим. cors была проблема. Предполагая, что вы выполняете запрос из одного домена в другой (т. Е. От localhost:8080 до localhost:3000 ), Который вам необходимо mode: 'cors' указать в настройках выборки, и ваш принимающий домен ( localhost:3000 ) должен разрешать запросы от отправляющего домена ( localhost:8080 ).

Итак, приведенное выше описание в коде:

запрос от localhost:8080 к localhost:3000

 fetch('http://localhost:3000/users/sign_in', {
      method: 'POST',
      mode: 'cors', // this cannot be 'no-cors'
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        "user": {
          "email": `${this.state.userEmail}`,
          "password": `${this.state.userPass}`
        }
      }),
    })
  

А затем убедитесь, что ваш принимающий домен localhost:3000 разрешает CORS localhost:8080 .

 headers: {'Content-Type': 'application/json'}
  

уже ответил

работал таким образом при отправке body как json сбой.

         var formData = new FormData();
        formData.append('key1', 'value1');
        formData.append('key1', 'value2');

        fetch('url', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data'
            },
            body: formData
        }`)`
  

РЕДАКТИРОВАТЬ: в моем случае сервер идентифицировал содержимое только через отправку данных формы. Код не был написан для чтения тела запроса как json. Таким образом, существует вероятность возникновения проблемы и с вашим кодом на стороне сервера.

Если вы используете экспресс-сервер для обработки запросов, обязательно добавьте в эту строку:

 app.use(express.json({limit:'1mb'}))
  

Единственное, что работало для меня, это поместить

app.use(express.json())

в моем основном файле сервера.

Вы должны попробовать это:

 fetch('/api/v1/users', {
    method: 'post',
    body: JSON.stringify({"user":{
        "email": email,
        "password": password
    }}),
});
  

fetch API

Попробуйте поместить (body-parser) в начало вашего app.js / server.js :

 app.use(bodyParser.json());