Как сделать простой почтовый запрос на реагирование с учетом API

Question

import React, { Component } from "react";
import axios from 'axios';

class App extends Component {



  handleSubmit(event) {
    axios.post('http://localhost:3050/login', {
      "username": "username",
      "password": "password"
    })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    event.preventDefault();
  }

  render() {

      return(

        <form onSubmit={this.handleSubmit}>
          <input type="submit" value="Submit" />
        </form>

      );
  }

}

export default App;

В настоящее время я играю с остальными api / реагировать, и я не мог заставить эту базовую передачу работать. Поэтому, используя почтальон "http://localhost:3050/login" в качестве почтового запроса, я отправил этот json

{
    "username": "username",
    "password": "password"
}

Тело ответа - 200 OK и возвращает

{ 
    "friends": 0,
    "id": "555"
}

Так вот что дает почтальонЯ пытаюсь имитировать это в приведенном выше коде, так что он публикует {"friends": 0, "id": "555"} в журнале консоли, если я должен представить. Но это ничего не делает. Я запутался

Answer 1

По умолчанию браузер заблокирует запрос к другому домену. В вашем случае вы запрашиваете http://localhost:3050 от http://localhost:3000., поскольку доменные имена отличаются, CORS будет расти. Чтобы восстановить его, вы должны включить CORS на сервере, который работает на порту 3050. Если вы используете node-express в качестве внутреннего сервера, используйте строку ниже, чтобы преодолеть CORS

app.all('/*', (req, res, next) => {

  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type,token, Access-Control-Request-Method, Access-Control-Request-Headers');
  if (req.method === 'OPTIONS') {
    res.sendStatus(204);
  } else {
    next();
  }
});

Answer 2

Изменить на

axios.post('http://localhost:3050/login',null, {params:{
    "username": "username",
    "password": "password"
   }}).
  then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
event.preventDefault();