0

I am extremely new at this and I'm trying to make a React Native app with a Flask backend. I know there have been similar posts but I haven't found one related to React Native with a solution that works yet.

This is my (extremely simple) app so far. It's just supposed to show "Flask says today's date is Monday" on the app:

enter image description here

This is my flask file:

enter image description here

When I run expo all that's shown is "Flask says the day today is". the Monday is never shown. When I inspect the page and go to console this is the exact error I'm getting:

enter image description here

Does anyone know why this isn't working? I would be eternally grateful for any advice I feel like I'm going crazy from this.

UPDATE When I do res.text() instead of res.json() and log it, I get this: enter image description here

Lia
  • 45
  • 1
  • 1
  • 8
  • 1
    `Unexpected token <` generally means you're getting *HTML*, not JSON, so did you look at the response in the network tab? – jonrsharpe Jan 25 '21 at 12:41
  • I'm fetching it from my flask application, and to my understanding Flask implicitly JSONifies ? Which is what I don't understand – Lia Jan 25 '21 at 12:43
  • So again did you look at what you're actually receiving to see if that gives any clues? *Are* you fetching it from your Flask application? The request `/date` will go to whatever's serving the React app, which may not be the same - is that the dev server, does it have any proxy configuration? – jonrsharpe Jan 25 '21 at 12:44
  • I'm not sure how to tell what I'm actually receiving – Lia Jan 25 '21 at 12:49
  • Well you could use `res.text()` instead of `res.json()`, for example, or look in the Network tab. – jonrsharpe Jan 25 '21 at 12:51
  • 1
    `console.log(data)` and see whats inside it? – Najam Us Saqib Jan 25 '21 at 12:53
  • @NajamUsSaqib that won't work because it's the call to `res.json()` that fails, so the callback on `data` is never reached. – jonrsharpe Jan 25 '21 at 12:54
  • you're requesting from your react app to /date endpoint. Can you change it to full url path like http://localhost/foo/bar. I think your flask server / port and react server does not share same url + port. What is the url and response when you try to see flask response in your browser? – hakki Jan 25 '21 at 12:54
  • check your `cleartext-traffic` permissions. – Najam Us Saqib Jan 25 '21 at 13:00
  • I put the full path and I got this error: "Access to fetch at 'http://localhost:5000/date' from origin 'http://localhost:19006' has been blocked by CORS policy:" I was afraid of this because I am unable to import CORS because of some environment error. I feel like I just opened another can of worms – Lia Jan 25 '21 at 13:01
  • So you either need to configure CORS in flask, or maybe set up a proxy for dev use so your client app *can* just make requests to /date (see the diagrams at https://github.com/textbook/starter-kit/wiki/Architecture for an explanation of the latter). Which makes sense depends on how you're going to deploy this *in production*. – jonrsharpe Jan 25 '21 at 13:03
  • try Flask-CORS https://flask-cors.readthedocs.io/en/v1.1/ It's easy to use. I think it will fix your CORS error. – hakki Jan 25 '21 at 13:04
  • it's about the type of data you're receiving from Flask – Aexomir Jan 25 '21 at 13:16
  • Okay so I imported CORS, and while the full URL path does work now, just /date does not – Lia Jan 25 '21 at 13:54
  • @jonrsharpe I updated my post to add what the res.text() outputs in console – Lia Jan 25 '21 at 14:04
  • Yes, because again it appears `/date` is going to the dev server, **not** Flask. So that front-end ("push-state") routing can work, the dev server returns `index.html` for unknown routes. So you either need to configure a proxy, or make your requests to Flask and enable CORS. – jonrsharpe Jan 25 '21 at 14:05
  • I don't understand how it's doing that when I configured a proxy in the package.json file so that "proxy": "http://localhost:5000". I really appreciate your help though, thank you – Lia Jan 25 '21 at 14:08

0 Answers0