Not receiving on React-Native frontend from Flask backend

Question

I'm new to React Native and trying to build an app. I'm confused on how exactly to "connect" the backend and frontend. I have added a proxy in package.json as most tutorials state:

{
  "name": "frontend",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "proxy": "http://127.0.0.1:5000",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "^17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "^0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I also have these two functions:

import React, {useEffect, useState} from 'react';
import test from './components/Home';

function App() {
  test();
  return (
    <div> </div>
  )
}

export default App;

import React, {useEffect, useState} from 'react';

function test() {
    useEffect(() => {
        fetch("/")
        .then(response => response.json()
        .then(data => {
            console.log(data)
        })
    )}, []);
}

export default test;

Right now, I'm just trying to print out the data in the console to see if the data is actually be received correctly (it's not) as I am getting an Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data error in the console.

however, the data I am trying to get printed out comes from my backend which currently looks like this:

from flask import Flask

app = Flask(__name__)

# API Routes
@app.route("/", methods=["GET"])
def home():
    return {"TEST": ["1", "2", "3"]}

if __name__ == "__main__":
    app.run(debug=True)

Going back to my test function in the JS file, if I change response.json() to response.text() , the error goes away but the console logs this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <!-- 
      This viewport works for phones with notches.
      It's optimized for gestures by disabling global zoom.
     -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover"
    />
    <title>portfolio</title>
    <style>
      /**
       * Extend the react-native-web reset:
       * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
       */
      html,
      body,
      #root {
        width: 100%;
        /* To smooth any scrolling behavior */
  ... and much more HTML

So it seems like I'm not receiving data from my backend. Is there something obvious I am missing? Thanks

Answer 1

You must configure Cross-origin to allow flask to receive the request from react.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

# API Routes
@app.route("/", methods=["GET"])
def home():
    return {"TEST": ["1", "2", "3"]}

if __name__ == "__main__":
    app.run(debug=True)

For more details on the subject: flask-cors

Not receiving on React-Native frontend from Flask backend

Question

1 answers

solution1
0 2021-12-21 13:18:33

Not receiving on React-Native frontend from Flask backend

Question

1 answers

solution1 0 2021-12-21 13:18:33

solution1
0 2021-12-21 13:18:33