ReactJS и Экспресс с возвращением Axios 404

Question

Не уверен, что происходит с моим кодом, но я пытаюсь просто выполнить тестовый запуск с консолью Axios, что-то выходит из системы, но я получаю 404.

class SubscribeForm extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.emailChange = this.emailChange.bind(this);
    this.emailSubmit = this.emailSubmit.bind(this);
  }

  emailChange(e) {
    this.setState({value: e.target.value});
  }

  emailSubmit(e) {
    e.preventDefault();
    axios.post('/subscribe', {
      email: 'someemail@email.com',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
      }
    }).then(res => {
      if(res.data.success) {
        this.setState({email: ''})
      }
    }).catch(error => {
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.log(error.request);
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
      }
      console.log(error.config);
    });
  }

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.subFormSection}>
        <p className={classes.formHelper}>
          Join the club, enter your email address
        </p>

        <form method="post" className={classes.subFormWrap} onSubmit={this.emailSubmit}>
          <TextField
            value = {this.state.value}
            onChange = {this.emailChange}
          />
          <Button
            className={classes.button}
            type="submit"
          >
            Send
            <Icon className={classes.rightIcon}>send</Icon>
          </Button>
        </form>
      </div>
    );
  }
}

Я попытался добавитьЗаголовки в axios, чтобы увидеть, в этом ли проблема, но я не думаю, что это (или, возможно, я делаю это неправильно).

Кроме того, у меня нет файла / подписки, я нене думаю, что мне нужно?С тех пор я записываю его с помощью экспресс: здесь:

const cors = require("cors");

app.use(cors());

app.post("/subscribe", (req, res, next) => {
  console.log(req.body.email);
});

Этот файл находится в файлах моего сервера, а часть реакции находится в файлах клиента.У меня настроен прокси-сервер, поэтому, когда я запускаю сервер, интерфейс и сервер взаимодействуют друг с другом.

---

Обновлен статус 404 (ожидание)

Я также настроил промежуточное ПО для прокси в своей папке клиента setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("/subscribe", {
    target: "http://localhost:5000"
  }));
};

Я получаю заголовок запроса в моем сетевом запросе на /subscrib:

Provisional headers are shown

Это вызывает (ожидание)?

Answer 1

Судя по всему, ваш сервер и клиентское приложение работают на разных портах.Если это так, вы не можете сделать это:

axios.post('/subscribe', {
      email: 'someemail@email.com',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
      }
})

Вы используете путь /subscribe без хоста.Axios пытается использовать хост, с которого запускается ваше клиентское приложение, и не находит этот путь, поэтому код состояния 404.

Если это так, вы можете исправить его, используя хост ипорт вашего сервера до пути /subscribe.См. Ниже:

axios.post('localhost:4000/subscribe', {
      email: 'someemail@email.com',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        "Access-Control-Allow-Origin": "*",
      }
})

Пожалуйста, измените здесь порт localhost:4000 на порт сервера.

Примечание. Это только для локальной разработки.

Если вы планируете развертывать приложение, вы можете использовать process.env.PORT.

Answer 2

Вы можете использовать элемент проверки браузера для проверки правильности выполнения запроса (Проверка элемента> Сеть).

Глядя на код, я думаю, что вам не хватает базового URL.

должно быть как

axios.post(baseul + port + request url)

Пример:

axios.post('http://localhost:3000/subscribe')