I have a nest.js webserver listening on localhost:3000 and an angular frontend served to localhost:4200 (with dev server). These ports are the defaults. My authentication flow consists of sending an access-token in a cookie to the frontend which doesn't get send back on subsequent calls because of different domain issues by the different ports. Can I overcome this issue somehow? I understand that if I don't run npm serve for the angular application only npm run build then a development server won't be started and I can serve the static files with nest.js which would solve the domain issue for the cookie, but this way I would loose watch mode and hot reloading for angular. Any suggestions?
Your nest.js webserver needs to set the Access-Control-Allow-Origin header, so that the browser running the frontend doesn't complain about communicating with that host.
Related
How to get the server host IP-address in Angular app started with ng serve --host 0.0.0.0?
The IP-Adress will be used when communicate with the backend server.
Since each coworker has its own IP-Address I should like to avoid to have it hardcoded in the code. I can´t use localhost either since then my coworkers can´t access it.
Is angular running completely on client side or is it possible to add something to fetch the IP-Address when the application get the first request?
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'm using a create-react-app-generated server for my front-end (under the hood it uses Webpack's dev server), and I'm using Node/Express for back-end. Whenever I have this combination, I always run into XSS issues (eg. between localhost:3000 and localhost:4000) because the two servers have to run on different ports.
Given that my production site will be serving everything from the same domain, I don't really need CORS or anything fancy. Is there any sort of easy/hack way to avoid cross-domain issues in such a local dev environment?
You can set the response header "Access-Control-Allow-Origin" to "*" in the express server. This post might help.
Hi Im running my frontend (create-react-app) and backend server (express.js) on different ports but on the same host.
For example: frontend is on 127.0.0.1:3000 and backend on 127.0.0.1:3003.
in my package.json:
{...
"proxy": "http://localhost:3003",
...}
Everything worked fine till I didn't migrate my app to remote server.
My app started to refresh unexpectedly when I'm trying to send http request (axios) to server (probably due to bad proxy settings).
So I have frontend app running on 35.125.320:10:3000 and server is running on 35.125.320:10:3003. My http requests was unexpectedly cancelled. (I checked the network ). So I changed my proxy settings to
{...
"proxy": "35.125.320:10:3003",
...}
but anyway my app is still refreshing when Im trying to make http req. on server. I think the problem is that I can't reach my express backend server. So proxy is forwarding my requests badly.
UPDATE
scenario:(Im doing two post requests)
1) first request still passed (app is not refreshed)
2) same request passed (but sometimes app is refreshed)
3) second is still cancelled by browser.
QUESTION
How can my frontend communicate with backend server via proxy when they are running on different ports but on the same server and domain ??
Thanks for the answer.
Solution:
The problem was that I used proxy in production that is only suitable for development.
I added this line in my express.js server :
app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));
I make a build and serve js,css files from my build folder. And also I needed serve static files (images, folders, etc...) from my public folder.
This problem can also cause cancelling http request by browser on production. Means, requests weren't able to reach server.
To make your app publicly available, you will want to make a production build. You mentioned in a comment that you "run npm build and then serve this build as static file in express.js". This is a great way to make your react app publicly available. As it says in the create-react-app documentation:
npm start or yarn start
Runs the app in development mode.
When running yarn start or npm start, you are also given a notification that says "Note that the development build is not optimized." The best option will be to run yarn build or npm build and find a way to serve those static files as you are doing.