I was working in a project and sudden noticed that while react is calling node api, i can see port number also in console network, which i think is not secure.
So is there any tool, settings whcih we can use to hide ports from api calls.
I am using apache as server, node api and react frontend.
Thanks
Tried virtual host settings but not worked
Related
I've made an Electron application as a server to receive API requests on the user's PC. Then I've allowed users to request API from the browser (not only on the same PC) to Electron application localhost server. To make it work, I've used Ngrok as a tunnel to publish my local port, but because of the limitation for free users, I could not use it anymore.
I'm aiming to solution calling localhost via Web Socket, but I could not found anyone attempted on the Internet.
Could you please give me some idea to deal with it? Thanks in advance.
I have a ReactJS project with its own Dockerfile, exposing port 3000:3000.
I also have a PHP project with its own Dockerfile, exposing port 80:80. The PHP app also has containers for MySQL, Redis and Nginx
For the PHP app, I have a docker-compose file that creates a network (my-net) for PHP, Nginx, MySQL and Redis to communicate on. However, I now want the ReactJS (which is in a separate project) to be able to communicate with the PHP app.
I added a docker-compose file to the React project, and added it to the network from the PHP project my-net and declared it as external so that it doesn't try to create it.
This seems to work: From the ReactJS container, I can ping app (the name of my backend service) and it works properly. However, from the ReactJS code, if I use something like axios to try and hit the backend API, it can't resolve app or http://app or any variation. It can however access the underlying IP address if I substitute that into in axios.
So there seems to be some issue with the hostname resolution, and presumably this is on the axios / JavaScript end. is there something I'm missing or a reason this isn't working?
When the JavaScript runs in a browser (outside of Docker) you can not use app because that is only available inside the Docker network (via the embedded DNS server).
To access your PHP server from outside use localhost and the exposed port (80) instead.
I have made a certain react js front-end, with a Go API running on different ports.
In Development mode (npm start) everything going well and works fine by setting the proxy to the GO API in package.json.
However when going to the Production or Deployment mode ( npm run build then npm -s build port xxxx ), proxy in package.json is not readable, and calling API through axios does not request data from the proxy.
Even though giving the full link with port directly gives a cross origin problem in react.
So any idea on how to set the axios in react js to call the go api running on different port when deploying using npm run build?
Thank you
Did you consume the GO API from ReactJs Page?
Does the GO API serve directly to public or running behind Nginx or Apache?
Maybe you need to ensure from Developer Tools within browser, does the request actually responded with cors issue.
If yes, you need to ensure whether the webserver (Nginx, Apache) does not interfere the cors. Or you just have to set it on your webserver (nginx, apache) config.
Currently, I am developing an application that makes use of a fully dockerised Node API service (which is served locally by Docker Nginx) and a simple React front-end which is served locally using PHP valet.
Running docker-compose up, builds the dockerized application successfully hosted on Nginx on port 80 and proxy passes requests to the node API on port 9999.
The problem that I am having is getting the react front-end to communicate with the dockerised node API.
Ideally I would like to either; move the dockerized Node api service to be served by PHP valet or move the front-end webapp to also be served by the docker nginx service
How can I fully dockerize the front-end and back-end services together so that they can talk to each other (ideally both hosted on port 80) or alternatively suggest how I can use Valet or MAMP together with containerised Node API.
How can I fully dockerize the front-end and back-end services together so that they can talk to each other (ideally both hosted on port 80) or alternatively suggest how I can use Valet or MAMP together with containerised node API.
With or without Docker, you will be confronted to same origin policy for frontend requests to the backend (XMLHttpRequest and some other requests) since two URLs have the same origin if the protocol, port and host are the same.
If the two apps were containers, hosts would differ by design since these will be two distinct containers. And if you kept the frontend app on the host, it would be also the case.
So in any case, you should enable CORS in the backend side (NodeJS) for at least requests of the frontend host. From the frontend side, nothing should be needed since CORS is a browser stuff : it sends pre-flights requests to the target host to get resource sharing agreement.
About make the frontend a Docker container, I think that if the frontend is designed to work with the Node backend, you should probably also make that a docker image/container and use docker-compose to manage them : it will make them more simple to manage/maintain.
Build the front-end to static HTML and serve it from the backend from the static directory.
The React front-end is loaded on a user's machine and executes there in their browser. It communicates to the server over HTTP(S).
How are you serving the React app now? A React app is just plain text files that are served over HTTP.
I built a Node app using this tutorial. Then I built a Node API using this tutorial. The app uses the app on port 4000 to connect to the API which then connects to a mongodb to store the info on the server.
This setup works great on my local machine, but I'm trying to deploy it on a digital ocean droplet. I have Nginx setup to listen to port 8080 for the main app. I'm able to navigate to the app. But when I try to register a user and submit the data to the API I get the following error in my browser OPTIONS http://localhost:4000/users/register net::ERR_CONNECTION_REFUSED.
I suspect I have to specify something in the Nginx config files. Or would it be a ufw issue? Any help would be much appreciated.
The error is very clear. The application try to fetch on localhost:4000, so you expect any visitor of your web app to have the API launched on their own computer.
Change your code to point to the correct host and port of you server.
Then, as you guess it, you will have to create a little Nginx configuration to tell him what to proxy to the APP and what to proxy to the API.