时间戳

首页 > 解决方案 > Reactjs-我不断收到无法 POST 错误

javascript - Reactjs-我不断收到无法 POST 错误

问题描述

在点击 Sing up 后，我正在使用 react 和 oninspec 构建登录和注册应用程序我收到错误：无法 POST /localhost:8000/register

在控制台上，显示以下消息： POST http://localhost:3001/localhost:8000/register 404 (Not Found)

我的 app.js 看起来像这样：


import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import { BrowserRouter,Switch,Route } from "react-router-dom";
import './App.css';
import Home from './components/home_component';
import Nav from './components/nav_component';
import Login from './components/login_component';
import Register from './components/register_component';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Nav/>
        <div className="auth-wrapper">
          <div className="auth-inner">
            <Switch>
              <Route exact path="/" component={Home}/>
              <Route exact path="/login" component={Login}/>
              <Route exact path="/register" component={Register}/>
            </Switch>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

我的 register_component.js 看起来像这样：

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

class Register extends Component {

    handleSubmit = e => {
        e.preventDefault();
        const data = {
            first_name: this.firstName,
            last_name: this.lastName,
            email: this.email,
            password: this.password,
            password_confirm: this.confirmPassword
        };

        axios.post('http:/localhost:8000/register', data).then(
            res =>{
                console.log(res);
            }
        ).catch(err =>{
            console.log(err);
        })
    };

    render() { 
        return ( 
            <form onSubmit={this.handleSubmit}>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>First Name</label>
                    <input type='text' className='form-control' placeholder='First Name' onChange={e => this.firstName = e.target.value}/>
                </div>

                <div className="form-group">
                    <label>Last Name</label>
                    <input type='text' className='form-control' placeholder='Last Name' onChange={e => this.lastName = e.target.value}/>
                </div>

                <div className="form-group">
                    <label>Email</label>
                    <input type='email' className='form-control' placeholder='Email' onChange={e => this.email = e.target.value}/>
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type='password' className='form-control' placeholder='Password'onChange={e => this.password = e.target.value}/>
                </div>

                <div className="form-group">
                    <label>Confirm Password</label>
                    <input type='password' className='form-control' placeholder=' Confirm Password' onChange={e => this.confirmPassword = e.target.value}/>
                </div>

                <button className='btn btn-primary btn-block'>Sign Up</button>
            </form>
        );
    }
}
 
export default Register;

标签： javascriptreactjs

解决方案

您在代码中提供了错误的链接

        axios.post('http:/localhost:8000/register', data).then(

它应该是

        axios.post('http://localhost:8000/register', data).then(

您缺少正斜杠

推荐阅读