Возникли проблемы при публикации в express бэкэнде с Ax ios с React - PullRequest
Новая
       17

Возникли проблемы при публикации в express бэкэнде с Ax ios с React

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

Я использую React, а затем js с бэкэндом Express, работающим на порте 3001.

Я пытаюсь получить страницу регистрации для публикации информации в базе данных, но Я получаю набор ошибок

РЕДАКТИРОВАТЬ - ИСПРАВЛЕНО CORS, Все еще возникают проблемы при публикации в БД

РЕДАКТИРОВАТЬ - ЭТО НОВАЯ ОШИБКА: 

POST http://localhost:3001/users/signup 404 (Not Found)

Это необучено ошибка обещания: 

createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

Я думал, что проблема была в сообщении с топором ios, но я не уверен. Поскольку я уже включил Cors, а также в заголовках для параметров ax ios, я не уверен, в чем проблема ..

BACKEND:

app. js: 

const express = require("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const session = require("express-session");
const FileStore = require("session-file-store")(session);
const upload = require("express-fileupload");

app.use(upload());
console.log("Server Started!");

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.use(logger("dev"));
app.use(cors);
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(
  session({
    resave: false,
    secret: "hello",
    saveUninitialized: true,
    is_logged_in: false,
  })
);

const indexRouter = require("./routes/index");
app.use("/", indexRouter);

app.get('/', function (req, res) {
  res.send('<h1>hello world</h1>')
});

module.exports = app;

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

SignUp.jsx: 

import React from "react";
import { Component } from "react";
import styled from "styled-components";
import {signup} from "./userFunctions";

class Signup extends Component {
  constructor() {
    super();
    this.state = {
      username: "",
      email: "",
      password: "",
      query: "",
      hits: [],
    };
    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangeEmail = this.onChangeEmail.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onChangeQuery = this.onChangeQuery.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChangeUsername = (e) => {
    this.setState({
      username: e.target.value,
    });
  };

  onChangeEmail = (e) => {
    this.setState({
      email: e.target.value,
    });
  };

  onChangePassword = (e) => {
    this.setState({
      password: e.target.value,
    });
  };

  onChangeQuery = (e) => {
    this.setState({
      query: e.target.value,
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    console.log("hello")

    const newUser = {
      username: this.state.username,
      email: this.state.email,
      password: this.state.password,
      query: this.state.query
    };


    signup(newUser).then((res) => {
      res.redirect("/chat");
    });
  };

  render() {
    return (
      <Wrapper>
        <TitleWrapper>
          <SignUpTitle>Signup</SignUpTitle>
        </TitleWrapper>
        <FormWrapper>
          <form onSubmit={this.onSubmit}>
          <HThree>E-mail:</HThree>
          <EmailInput
            type="text"
            placeholder="E-mail"
            onChange={this.onChangeEmail}
            value={this.state.email}
          ></EmailInput>
          <HThree>Username:</HThree>
          <UsernameInput
            type="text"
            placeholder="Username"
            onChange={this.onChangeUsername}
            value={this.state.username}
          ></UsernameInput>
          <br></br>
          <HThree>Password:</HThree>
          <PasswordInput
            type="text"
            placeholder="Password"
            onChange={this.onChangePassword}
            value={this.state.password}
          ></PasswordInput>
          <br></br>
          <HThree>Confirm Password:</HThree>
          <PasswordMatchInput
            type="text"
            placeholder="Password-Confirm"
            onChange={this.onChangePassword}
            value={this.state.password}
          ></PasswordMatchInput>
          <br></br>
          <SignUpButton
            type="submit"
            value="Signup"
            className="signup-button"
          ></SignUpButton>
          </form>
          <br></br>
          <LoginPage href="/login">Looking for login?</LoginPage>
        </FormWrapper>
      </Wrapper>
    );
  }
}

Вот пост сообщения

userFunctions. js: 

import axios from "axios";



const options = {
    credentials: "include",
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET,HEAD,OPTIONS,POST,PUT"
    },

};

export const signup = (newUser) => {
    return axios
        .post("http://localhost:3001/users/signup", {
            name: newUser.name,
            email: newUser.email,
            password: newUser.password
        }, options)



.then(response => {
        console.log("User is now registered")
    })

}

1 Ответ

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

cors - это заводская функция, которая при вызове возвращает функцию промежуточного программного обеспечения Express, которая устанавливает требуемые заголовки CORS, которые допускают входящие перекрестные запросы. 

app.use(cors()); // instead of app.use(cors)

Ссылка на документацию

Также в axios необходимо добавить префикс URL конечной точки к части протокола. 

.post("http://localhost:3001/users/signup") // you were missing "http://"
...