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.
Related
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
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.
We have two applications deployed to PCF:
A Spring Boot REST Backend on a route e.g. backend.route1.net deployed with java_buildpack_offline
We also have our React Frontend on the same instance on a route e.g. frontend.route1.net pushed with a Staticfile with a single line content of: pushstate: enabled
Both works separately, which we can confirm by accessing the endpoints on both directly, for which they clearly return the expected values, hence they are both working well.
However, as soon as we try to access a page on the Frontend that needs to talk to the Backend using Axios we get a ERR_CERT_COMMON_NAME_INVALID
The generic things I find on Google or in PCF Documentation don't seem to be helping. Any tips where should I continue looking or what the actual issue could be?
If you need further info please ask.
Thanks!
/András
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 :/
I am developing a React project for studies and would like to publish.
I tried some ways, but the site is blank, there is no data from the NEWS-API I am using.
It seems to make no mistake.
It is a front application, only react with the API.
If it helps, here's the repository link.
https://github.com/carlos-souza-dev/apinews
I visited your deployment in vercel from your github repo and noticed this issue.
You're requesting data from the API over http which is insecure, while your page hosted by vercel uses https.
Modern browsers donot allow for a page served over https to request http data.
It might just be a fixed by changing your urls to use https, or if the API didn't have https you might have to do other workarounds.(Although it's better to use an API with https support)
I noticed this by opening the console after visiting your page to see these Mixed content requests blocked error.
The reason for the blank page after loading is that the Promise to get the data from the API get rejected but never handled causing the JavaScript execution to stop
[EDIT 1]
I read through some of the code in your repository and noticed a link pointing to localhost. It looks like you tried to setup a nodejs server to proxy data through https
The API you're using does seem to have HTTPS support
Conclusion:
Try changing the links to the API to https instead of http in your react code and see if it works. If it does, there's no need for a backend server of you're own
If the API doesn't have HTTPS support however, do either one of
Migrate to a different API with HTTPS support
Try serving your static react app through the backend and pointing your react app to /path/to/api/route without an absolute url and use the proxy setting in package.json as said here for development
Point to a full path to your backend server on the internet (i.e remove localhost links)
Also note that you cannot deploy a backend to vercel but it does support serverless functions