Реагируйте Fetch () на мой локальный Node Express backend; Невозможно вернуть тестовое значение бэкэнда

Question

Я пытаюсь настроить внутренний сервер с узлом, однако не могу получить тестовое значение, отправленное из внутреннего интерфейса из приложения веб-интерфейса реагирования. Я должен показать «Тестирование для получения данных из бэкэнда», если он работает правильно.

Кроме того, я немного запутался по поводу извлечения в HomeScreen. js, какой IP-адрес мне следует указать? И мне нужно обновлять его каждый раз, когда я менял устройство?

Если я хочу подключиться к базе данных azure sql, что я должен изменить в пользователе. js? Спасибо!

Вот мое приложение. js:

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var mysql = require('mysql');

var indexRouter = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
  // next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

вот мой пользователь. js

var router = express.Router();
var mysql = require('mysql');

var connection = mysql.createConnection({
  // host:'localhost',
  // user: 'root',
  // password: 'root',
  // database: 'users'
  authentication: {
    options: {
      userName: "username", // update me
      password: "password" // update me
    },
    type: "default"
  },
  server: "azure-server", // update me
  options: {
    database: "database", //update me
    encrypt: true 
  }
});

router.post('/', function(req, res, next) {
  res.send({message: 'testing to get data from backend'});
});

module.exports = router;

вот мой главный экран входа в систему. js

import * as React from 'react';
import { StyleSheet, Text, View, ScrollView, Image, Button, TextInput, Alert, AsyncStorage } from 'react-native';

export default class HomeScreen extends React.Component {

  constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
    this.state = {
      username: '',
      password: '',
    }
  }
    // state = {
    //         username: 'Username',
    //         password: 'Password'
    //       }

    componentDidMount() {
      this._loadInitialState().done();
    }

    _loadInitialState = async () => {
      var value = await AsyncStorage.getItem('user');
      if (value !== null) {
        this.props.navigate('Menu');
      }
    }

    static navigationOptions = {
    title: 'Home',
    };

    login = () => {
      // alert(this.state.username);
      fetch("https://123.123.123.123: 3000/users", {
        method: "POST",
        headers: {
          'Accept': 'application/json',
          'Content-type': 'application/json',
        },
        body: JSON.stringify({
          username: this.state.username,
          password: this.state.password,
        })
      })
      .then((response) => response.json()) 
      .then((res) => {

        alert(res.message);
        if (res.success === true) {
          AsyncStorage.setItem('user', res.user);
          this.props.navigation.navigate('Menu');
        }
        else {
          alert(res.message);
        }

      })
      .done();
    }

    render() {
    return (
      <ScrollView style={{flex: 1}}>
        <View style={styles.container}>
          {/* <ImageBackground style = {styles.background} source={require('./img/bg.gif')}> */}
          <Text style={{ color: "black", fontSize: 30 }}>MEDIC DRAW</Text>

          <Image style = {styles.login_image} source={require('../../img/blankprofile.jpg')} resizeMode="contain"></Image>

          <TextInput
            style={styles.input}
            placeholder= {"username"}
            autoCorrect={false}
            clearButtonMode="always"
            ref= "username"
            onChangeText={(username) => this.setState({username})}
            value={this.state.username}
          />
          <TextInput
            style={styles.input}
            placeholder= {"password"}
            autoCorrect={false}
            clearButtonMode="always"
            ref= "password"
            onChangeText={(password) => this.setState({password})}
            value={this.state.password}
            secureTextEntry = {true}
          />
          <Button
              title="Login"
              onPress= {this.login.bind(this)} // {() =>this.props.navigation.navigate('CreateAccount')}
            />
          <Button
              title="Sign Up"
              onPress={() =>this.props.navigation.navigate('CreateAccount')}
          />

          {/* </ImageBackground> */}
        </View>
      </ScrollView>
      );
    }
  }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  input: {
    height: 40,
    width: '60%',
    borderColor: 'gray',
    marginBottom: '2.5%',
    borderWidth: 1
  },

  login_image: {
    height: '20%',
    marginBottom: '2.5%',
  },

  // background: {
  //   width: '100%',
  //   height: '100%',
  //   justifyContent: "center",
  //   alignItems: "center",
  // }
});