Ошибка сети при публикации формы с ReactJS

Question

Я новый разработчик ReactJS , я разрабатываю регистрационную форму с ReactJS на FrontEnd, NodeJS на BackEnd и MySQL о базы данных.

Я хочу отправить регистрационную форму, когда я проверяю свой Backend на Postman, он работает хорошо и вставляет в мою базу данных дату, такую ​​как я получаю: { "code": 200, "success": "user registered sucessfully" }

Мой код указан ниже:

import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import axios from 'axios';
import Login from './Login';

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            email: '',
            password: ''
        }
    }
    componentWillReceiveProps(nextProps) {
        console.log("nextProps", nextProps);
    }
    handleClick(event, role) {
        var apiBaseUrl = "http://localhost:4000/api";


        if (this.state.username.length > 0 && this.state.email.length > 0 && this.state.password.length > 8) {
            var payload = {
                "username": this.state.username,

                "email": this.state.email,
                "password": this.state.password
            }
            axios.post(apiBaseUrl + '/register', payload)
                .then(function(response) {
                    console.log(response);
                    if (response.data.code === 200) {
                        console.log("registration successfull");
                    }
                    else {
                        console.log("some error ocurred", response.data.code);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
        else {
            alert("Input field value is missing");
        }

    }
    render() {

        return (
            <div>
        <MuiThemeProvider>
          <div>
          <AppBar
             title="Register"
           />
           <TextField
             hintText="Enter votre username"
             floatingLabelText="Username"
             onChange = {(event,newValue) => this.setState({username:newValue})}
             />
           <br/>

           <TextField
           type = "email"
             hintText="Email"
             floatingLabelText="Email"
             onChange = {(event,newValue) => this.setState({email:newValue})}
             />
           <br/>
           <TextField
             type = "password"
             hintText="Enter your Password"
             floatingLabelText="Password"
             onChange = {(event,newValue) => this.setState({password:newValue})}
             />
           <br/>
           <RaisedButton label="Submit" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>
          </div>
         </MuiThemeProvider>
      </div>
        );
    }
}

const style = {
    margin: 15,
};

export default Register;

Мой пакет.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "material-ui": "^0.20.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-dropzone": "^3.10.0",
    "react-file-tree": "0.0.8",
    "react-router-dom": "^4.0.0",

  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:4000/"
}

Когда я запускаю свой интерфейс, я получаю:

xhr.js:175 OPTIONS http://localhost:4000/api//register 0 ()
dispatchXhrRequest @ xhr.js:175
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:57
Axios.(anonymous function) @ Axios.js:77
wrap @ bind.js:9
handleClick @ Register.js:33
onClick @ Register.js:93
EnhancedButton._this.handleClick @ EnhancedButton.js:146
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:452
executeDispatch @ react-dom.development.js:836
executeDispatchesInOrder @ react-dom.development.js:858
executeDispatchesAndRelease @ react-dom.development.js:956
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:967
forEachAccumulated @ react-dom.development.js:935
processEventQueue @ react-dom.development.js:1112
runEventQueueInBatch @ react-dom.development.js:3607
handleTopLevel @ react-dom.development.js:3616
handleTopLevelImpl @ react-dom.development.js:3347
batchedUpdates @ react-dom.development.js:11082
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421

Register.js:53 Error: Network Error
    at createError (createError.js:15)
    at XMLHttpRequest.handleError (xhr.js:87)

Как я могу это исправить, пожалуйста?

Answer 1

Если вы используете внешний интерфейс в другом порту, причиной может быть CORS. Backend не разрешает запросы, поступающие от внешних интерфейсов, которые запускаются на другом сервере или порту. Чтобы избежать этого, вы можете добавить этот код в свой веб-интерфейс: (лучше включить в файл app.js, чтобы он работал во всех сценариях)

axios.defaults.withCredentials = true;

Кроме того, вам нужно добавить следующий код в ваш бэкэнд NodeJS: (лучше включить в server.js) (я полагаю, вы используете Express Framework)

var app = express();
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:YOUR_FRONT_END_PORT');
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Methods', ['PATCH', 'POST', 'GET', 'DELETE', 'PUT']);
  res.setHeader('Access-Control-Allow-Headers', ['Content-Type']);
  res.setHeader('Access-Control-Expose-Headers', ['Content-Type']);
  next();
});

Вам также может понадобиться следующий код, если вы используете любое промежуточное программное обеспечение. В вашем промежуточном программном обеспечении добавьте:

if (req.method === "OPTIONS") {
  return next();
}

Но если вы не знаете, что делаете с этими исключениями, рассмотрите возможность использования в будущем такого веб-сервера, как NGINX.

Answer 2

Как уже упоминалось - если ваш бэкэнд находится на другом порту или URL, не забудьте включить CORS:

axios.post(apiBaseUrl + '/register', payload, { withCredentials: true })

Также, пожалуйста, проверьте, какой контент вы ожидаете на стороне сервера - по умолчанию axios.post отправит данные в виде JSON (с заголовком Content-Type, установленным на application/json), если вы ожидаете, что, скажем так application/x-www-form-urlencoded затем установите заголовок Content-Type соответственно.

axios.post(apiBaseUrl + '/register', payload, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded'
})

Answer 3

Не уверен, но способ, которым вы определили apiBaseUrl, не верен, я думаю. Пожалуйста, посмотрите на это.