Express Server cannot GET request from the React Native app

Question

Goal: To create a frontend and backend that can communicate with each other. I started with the frontend and used https://reactnative.dev/movies.json as a placeholder to feed the front end data. Once that was completed successfully, I began developing the server and even though it works in Postman, it does not work in the front end.

Issue: When I replace https://reactnative.dev/movies.json with http://xxx.xxx.xxx.x:5000/movies.json the backend and the frontend fail to communicate.

Testing so far: My react native app can successfully GET the reactnative.dev JSON movie list built by https://reactnative.dev/movies.json and will display the list of movies.

I have tested the backend with Postman and have verified that http://xxx.xxx.xxx.x:5000/movies.json returns the exact same JSON response as https://reactnative.dev/movies.json

Front End (Works - can GET from https://reactnative.dev/movies.json):

import React from 'react';
import { StyleSheet, Text, View, ActivityIndicator, Button } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        isLoading: true,
        dataSource: null,
    };
}

  componentDidMount(){
    return fetch('https://reactnative.dev/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.movies,
      })
    })
    .catch((error) => {
      console.log(error);
    });
  }

  render () {
    if(this.state.isLoading) {
      return (
       
        
      
      )
    } else {
      let movies = this.state.dataSource.map((val, key) => {
        return 
          {val.title}
        
      });
      return (
         
          {movies}
          
        
        )     
    }
  }
}

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

Server Structure:

/backend
--/data
  --movies.json
--/routes
  --movies.js
  --routes.js
server.js
package.json
package-lock.json
server.cert
server.key
.env
.gitignore

/data/movies.json

{
    "title": "The Basics - Networking",
    "description": "Your app fetched this from a remote endpoint!",
    "movies": [
      { "id": "1", "title": "Star Wars", "releaseYear": "1977" },
      { "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
      { "id": "3", "title": "The Matrix", "releaseYear": "1999" },
      { "id": "4", "title": "Inception", "releaseYear": "2010" },
      { "id": "5", "title": "Interstellar", "releaseYear": "2014" }
    ]
}

/routes/movies.js

const userRoutes = (app, fs) => {
    // variables
    const dataPath = "./data/movies.json";
    
    // READ
    app.get("/movies.json", (req, res) => {
        fs.readFile(dataPath, "utf8", (err, data) => {
        if (err) {
            throw err;
        }
        res.send(JSON.parse(data));
        });
    });
};

module.exports = userRoutes;

/routes/routes.js

// load up our shiny new route for users
const userRoutes = require("./movies");

const appRouter = (app, fs) => {
  // we've added in a default route here that handles empty routes
  // at the base API url
  app.get("/", (req, res) => {
    res.send("welcome to the development api-server");
  });

  // run our user route module here to complete the wire up
  userRoutes(app, fs);
};

// this line is unchanged
module.exports = appRouter;

server.js

// load up the express framework and body-parser helper
const express = require("express");
const bodyParser = require("body-parser");

// create an instance of express to serve our end points
const app = express();

// we'll load up node's built in file system helper library here
// (we'll be using this later to serve our JSON files
const fs = require("fs");

// configure our express instance with some body-parser settings
// including handling JSON data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// this is where we'll handle our various routes from
const routes = require("./routes/routes.js")(app, fs);

// finally, launch our server on port 5000.
const server = app.listen(5000, () => {
  console.log("listening on port %s...", server.address().port);
});

Console Error Output:

Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:511:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Updated the Server to use HTTPS:

// load up the express framework and body-parser helper
const express = require("express");
const bodyParser = require("body-parser");
// create an instance of express to serve our end points
const app = express();

// we'll load up node's built in file system helper library here
// (we'll be using this later to serve our JSON files
const fs = require("fs");
const https = require('https');

// configure our express instance with some body-parser settings
// including handling JSON data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// this is where we'll handle our various routes from
const routes = require("./routes/routes.js")(app, fs);

// finally, launch our server on port 5000.
const server = https.createServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}, app).listen(5000, () => {
  console.log("listening on port %s...", server.address().port);
});

Console Error Output after HTTPS update:

Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:505:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Test results in Postman for HTTPS server: GET request worked, however I had to set Postman to accept a self signed certificate.

I ran expo eject to expose the entire Info.plist The key and dict for NSAppTransportSecurity were already set below in Info.plist:




  
    CFBundleDevelopmentRegion
    en
    CFBundleDisplayName
    csharp_frontend
    CFBundleExecutable
    $(EXECUTABLE_NAME)
    CFBundleIdentifier
    $(PRODUCT_BUNDLE_IDENTIFIER)
    CFBundleInfoDictionaryVersion
    6.0
    CFBundleName
    $(PRODUCT_NAME)
    CFBundlePackageType
    APPL
    CFBundleShortVersionString
    1.0.0
    CFBundleSignature
    ????
    CFBundleVersion
    1
    LSRequiresIPhoneOS
    
    NSAppTransportSecurity
    
      NSAllowsArbitraryLoads
      
      NSExceptionDomains
      
        xxx.xxx.xxx.x
        
          NSExceptionAllowsInsecureHTTPLoads
          
        
      
    
    NSLocationWhenInUseUsageDescription
    
    UILaunchStoryboardName
    SplashScreen
    UIRequiredDeviceCapabilities
    
      armv7
    
    UISupportedInterfaceOrientations
    
      UIInterfaceOrientationPortrait
      UIInterfaceOrientationPortraitUpsideDown
    
    UIViewControllerBasedStatusBarAppearance
    
    UIStatusBarStyle
    UIStatusBarStyleDefault
    UIRequiresFullScreen

Updated the Info.plist to include IP address of server instead of localhost

      
        xxx.xxx.xxx.x
        
          NSExceptionAllowsInsecureHTTPLoads

The error slightly changed - new error - '373:10 in __guard'

Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:505:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Maybe the Issue: I think that since the SSL certificate is self signed, the react native front end is treating the request as HTTP instead of HTTPS.

Any Ideas??

Express Server cannot GET request from the React Native app

Answers (1)

Related Questions