I have a React app on 127.0.0.1:3000 / 192.168.0.104:3000 and a Laravel api on 127.0.0.1:8000.
My problem is, I can fetch the data on my computer (127.0.0.1), but it seems that the React app can't correctly get the data from the database when I access the React app from my phone on LAN (192.168.0.103).(I can see the React app)
Can someone help me to solve this problem or tell me what may cause this? Thank you.
I suspect you have a CORS policy error. I'm not familiar with Laravel cause you know, PHP, but a quick google search would probably tell you how to allow a foreign domain to have access to your api.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
To verify you have a cors policy error, you'd have to open dev tools and take a look at the errors. However, I'm unsure if that's possible on a mobile browser. I never tried, so it could be possible. Again another google search would answer that for you.
I just solved this problem by myself. It is because that the client can not find the Laravel API on LAN. In Img A the port 8000 is not open on the machine, so the client can't access the API.
Img A
My solution is that host the API and APP on the different machine and make sure that the client can access both the APP and API.
Img B
Related
Can anyone help how to configure nginx so it only accepts the server IP where ReactJS is hosted?
Ive tried many options to no avail. I always see ReactJS is using the client IP where the user is currently browsing (because of I guess of its client-based nature). Unfortunately, I need to block all other request to protect my Django rest api from external requests. My Django app is having this nginx reverse proxy by the way. How do you guys do this?
I think you seriously misunderstood how your app works. Unless you are doing something really, really weird, it generally works like this:
The user's browser (the client) receives the ReactJS code from the server hosting it
The ReactJS code is executed in the user's browser
All requests for your REST API will originate from the user's browser executing the ReactJS code, i.e. coming from the client machine, not from the server hosting the ReactJS code
The server hosting the ReactJS code merely returns the ReactJS code to client, and doesn't even interact with the server hosting Django REST API
Thus, what you are attempting to do is misguided and in fact will just restrict your users.
As a side note, you may use several complicated techniques to be somewhat sure that the API requests do come from a browser executing your ReactJS code (i.e. a legitimate use of your API) rather than other tools, but that's far from a guarantee and in most cases serves no practical purpose anyway.
I'm currently working on a personal project where I wanna display all the skins from Valorant (Riot games FPS).
So I'm building a React web app and a nodejs backend proxy server to request skins' data from RIOT API ( https://developer.riotgames.com/apis#val-content-v1/GET_getContent) and send them to my client side app.
The problem is : I manage to get the data on my backend server
but when I try to request my backend server from my react app.js, I don't know how to put these data into my application state and display their name.
this is what i get in localhost:3000 : App Component developer tab / Network developer tab
I watched several tutorials on how to do this and tried but it didn't work. Is there something I'm missing or misunderstood ? Don't be afraid to ask me more details if needed, that's my first question asked on StackOverflow I hope I did it right :)
EDIT: I modified the getSkins() method in my App.js to this as suggested but it still doesn't work :/
please help me with the following problem as it already taken me so much time to figure out:
I have an API which I created using PHP and hosted with AWS EC2.
This API is to be consumed by a React frontend app I made, and when I am developing the frontend there are no problems sending and receiving data from the API.
However, after I deploy the app using AWS Amplify, the app loads correctly but fails to connect to the api(i.e. not showing fetched data, unable to post forms)
I read a little bit about proxying but I am not sure it is the solution and if so, how would I implement it.
Thanks a lot in advance.
I resolved the issue.
My problem was that the server was not listening to https port, so the browser blocked the content.
I created an API in Spring for my react app. When I was ready to publish site I noticed that the app can not call the api. I went to the api link and noticed it said this site is not secure. I did create a self assigned certificate so that https would work but its giving me this issue now. Until I click trust the react app will not fetch the data. Once I click trust once it works but other people using my site wont know that. How can I fix my API so that it is trusted?
The problem is that you're creating an SSL Certificate build by yourself. Browsers only accept trusted certificates signed by companies.
You will need to buy a certificate and use it on your app. Here's a source of signed certificates: https://www.getssl.com/
I did never used the free options, but some people say it works fine too: https://www.sslforfree.com/
For better understanding of that I strongly recommend you the following video: https://www.youtube.com/watch?v=uNdYea6OCuA
Hope it helps you bro.
In my PWA everything is working except POST HTTP calls. I have a login on my first screen. It says Network Error. But it works fine Desktop/Laptop web browser. Only found the problem on mobile app [Android]
Note
I used Vue CLI for creating project.
I also tried with React. Happened the same. I don't know what's wrong with me.
You most likely try to connect to localhost. When deploying to a different device localhost is the actual device you are deploying and most likely you are not running a web server there.
You need to find your local machine's ip and use that as base url for HTTP calls.