Issue
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
Solution
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
Answered By - Tobin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.