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.
Related
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.
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.
So I'm building an end to end application (With node.js/mysql back end, react front end, and using the express router), but I'm having trouble setting up a local development server. I don't need it to be accessed from the outside world, just be able to load different pages connecting to the express router. I don't have any dev ops experience for this, so I'm trying to use nginx to point it to the router which I can't figure out. Is there an easier way to do this?
I also need to run this on a windows machine, which just makes everything slightly more complicated
It's not entirely clear from your description how your application is set up and what the role of Nginx is.
So I'll start from the beginning...
Nginx is primarily an HTTP server which can also function as a proxy for HTTP requests. If you've written a Node.js application using Express, you have written an HTTP server which can handle any routes you have set up and can also serve your static assets (ie. HTML pages, images, front-end Javascript, CSS, etc.). In this case, there is no need for Nginx - if you wrote something like the Express "Hello World" app, then you will see a message like "Example app listening on port 3000" and you can connect to your app by visiting http://localhost:3000 in your browser.
That's it - there's literally nothing else to your app and there is no need for Nginx (or any other HTTP server) to run your application.
Now that's not to say that there is no role for Nginx in your application, but it may not be as an HTTP server. One possibility is that you may want to set up Nginx as a proxy, to handle certain routes by sending the requests to your Node application. For example, I set up an application some time ago which uses Nginx to proxy API routes for my application to a Node application and to serve static assets directly. This may be what you have in mind - if it is, you will need to configure different routes in Nginx to serve different things (and unfortunately there's not enough information in your question to give suggestions on this).
As an aside, you're probably going to find this much easier to set up using Linux - perhaps the Windows Linux Subsystem, a virtual machine running Linux, or Docker.
You'll probably want to use
https://github.com/facebook/create-react-app
create-react-app my-app will set up everything you need (webpack, etc.), and then
npm start will start a local development server.
Should work on Windows, but I don't know, because I wouldn't use/recommend Windows ;-)
There is no issue b/w establishing connection b/w nodejs & angular. Also the database results are fine. This is the only problem I'm facing now.
I have 2 different ports but same server
0.0.0.0:3000 - for nodejs
0.0.0.0:4200 - for angular
When I make an api request to node(mongodb) from angular it is visible in browser console as well as networks tab when I inpect. How can I overcome this ?
You can't. Angular is an SPA, a framework that works on front-end. Which means once the files of the application downloaded in the browser memory, it then launch the instance of your application.
Afterwhat, when you make a request to an API or any other URL, the browser behaves as it should : it makes the request. You have no real way to prevent this.
That doesn't mean the requests are not secure. Viewing requests made by your app in the console or the network tab doesn't mean it's not secure.
you can use nginx as a proxy server to redirect your all REST call to overcome this.
for detailed use please visit here nginx
I want to ask about some good practices. I have a Node.js (Express) web server and socket.io push server (in case technology matters). I can turn both of them into one application but I want them separated (they can communicate with each other if necessary). There are two reasons to do that:
It will be easier to manage, debug and develop the app;
It will be a lot easier to scale the app. I can just add another instance of push server or web server if necessary;
This is at least what I believe. The only problem is that when a client connects to the seperate socket.io server then it won't send cookies (different port, cross-domain policy).
The workaround I came up with is to put a reverse proxy (written in Node.js as well) in front and check what kind of request we are dealing with and send it to web server or push server accordingly. Great, now we have cookies in both web server and push server. The reverse proxy can be a load balancer which is an additional bonus.
It looks like a good idea to me. What do you think about this design? Perhaps any other workaround for cookie problem?
I recently did something simular, we initially used a node.js reverse proxy but ran into reliability/scalability problems. We found serving static files and proxying requests was best left to nginx. haproxy is also a very viable solution for stand alone proxying as well.
HaProxy
Nginix as a reverse proxy