ReactJS и Express с Axios возвращают сообщение об ошибке 404 - PullRequest
Новая
       17

ReactJS и Express с Axios возвращают сообщение об ошибке 404

0 голосов
/ 18 мая 2019

У меня есть сервер Node / Express, работающий на бэкэнде, и реагирующий интерфейс, и я пытаюсь создать самый простой API - но, несмотря на то, что я делаю, мне кажется, что я получаю ошибку 404 в пост-запросе. Я попытался добавить прокси в package.json, удалить прокси и включить порт в адрес i..e http://localhost:5000/createaccount,, включая прокси на http://localhost:5000 и просто используя '/ createaccount' в почтовый запрос. Я пробовал разные вещи с CORS и заголовками, похоже, ничего не работает.

Когда я захожу на http://localhost:5000/createaccount в моем браузере отдельно, он успешно регистрирует "привет мир", поэтому я знаю, что сервер работает. Я также знаю, что на данный момент ничего не делается с отправленными данными, просто пытаюсь установить соединение на данный момент! Я также пытался раскомментировать / комментировать большинство вещей в запросе на выборку, но безрезультатно.

Код Server.js: 

// server.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const PORT = 5000;
const cors = require("cors");

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get("/createaccount", (req, res) => {
  console.log("test");
  res.append("Access-Control-Allow-Origin", ["*"]);
  res.append("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
  res.append("Access-Control-Allow-Headers", "Content-Type");
  res.send("testComplete");
});

app.listen(PORT, function() {
  console.log("Server is running on Port: ", PORT);
});

Код CreateAccountjs: 

// Create.js

import React, { Component } from "react";
import axios from "axios";
import { Button, FormGroup, FormControl, FormLabel } from "react-bootstrap";

export default class CreateAccount extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      email: "",
      password: ""
    };
  }

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    const data = {
      email: this.state.email,
      password: this.state.password
    };
    fetch("http://localhost:5000/createaccount", {
      method: "POST", // *GET, POST, PUT, DELETE, etc.
      mode: "cors", // no-cors, cors, *same-origin
      headers: {
        "Content-Type": "application/json"
        // "Access-Control-Allow-Origin": "*"
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: "follow", // manual, *follow, error
      referrer: "no-referrer", // no-referrer, *client
      body: JSON.stringify(data) // body data type must match "Content-Type" header
    }).then(res => console.log(res));
  };

  render() {
    return (
      <div className="CreateAccount">
        <form onSubmit={this.handleSubmit.bind(this)}>
          <FormGroup controlId="email">
            <FormLabel>Email</FormLabel>
            <FormControl
              type="email"
              value={this.state.email}
              onChange={this.handleChange.bind(this)}
            />
          </FormGroup>
          <FormGroup controlId="password">
            <FormLabel>Password</FormLabel>
            <FormControl
              value={this.state.password}
              onChange={this.handleChange.bind(this)}
              type="password"
            />
          </FormGroup>
          <Button type="submit">Sign up!</Button>
        </form>
      </div>
    );
  }
}

1 Ответ

1 голос
/ 18 мая 2019

Вы получаете 404, потому что вы не создали POST-маршрутизацию на узле-сервере.

Таким образом, вы должны иметь это для размещения в своем коде 

app.post("/createaccount", (req, res) => {

});

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

...