I am trying to build a nodejs api, I am wondring how to make it only accessible by my frontend application (MERN stack). Because others can see from the console in the frontend site the address of my backend appilcation built using nodejs
I tried cors, but it's still accessible via POST MAN
When I build my react js it does not show any fetch API and gave me an error (get/playlist) When I developed the react js web I give proxy in the package.json file. I know that it works only on the development side but how to fetch API when I build the website and that present to the client with fetch API can I use express js?
An app that I fetch is in localhost/9563 React js run in localhost/3000
The easiest way is to use the proxy from react:
https://create-react-app.dev/docs/proxying-api-requests-in-development/ - which you might already do based on your question.
Can you maybe share your package.json? I suspect you might have misconfigured it.
Alternatively if you do not wish to use the proxy:
Make sure to enable CORS in your Express application, due to different ports between frontend and backend, the same-origin policy of your browser does not apply. So the request will not be run.
You can use the CORS middleware for it:
https://expressjs.com/en/resources/middleware/cors.html
Once your Express backend allows CORS, your request should run just fine.
As a side note: Server-side cookies will NOT be sent this way, as many browsers do not send cookies if the port is different. If you need server-side cookies to be sent along in your fetch request, you need to have 3 things in place:
CORS is enabled in backend
CORS Allow Credentials header is set in backend
in the frontend fetch is called using {withCredentials: true} option
Both backend and frontend run under the same port (especially important on localhost), so you may need nginx for proxying to backend/frontend in that case.
I am using Blueprints to create two separate modules, one for api and one for website. My APIs have a route prefix of api. Now, I am having a route in my website called easy and it will be fetching a JSON from a route in api called easy and it's route is /api/easy.
So, how can i call /api/easy from /easy.
I have tried using requests to call http:localhost:5000/api/easy and it works fine in development server but when I am deploying it on Nginx server, it fails probably because I am exposing port 80 there.
When I deploy my webapp on nginx, it show up perfectly just that route /easy throws Internal Server Error.
Okay so what worked for me is I simply ended up calling the api function from the frontend rather than doing the POST requests. Obviously, it makes no sense creating backend routes for flask seperately when you are using Flask too in frontend. Simply, a seperate utility function would be fine.
I am developing a frontend application as well as a backend API (JSON). Both are in Node/Express. In the frontend, I need to call multiple API's in the backend layer. Since both apps run on different port, AJAx calls cannot be made directly. Therefore, I have 2 options:
Frontend AJAX calls a route which initiates an HTTP request to the backend.
I allow CORS in the backend and then AJAX can call directly the backend
In option 1, I found myself creating the same code more and more. Code seems to be redundant and for every AJAX call I have an extra HTTP method in the controller. In option 2, since I am using the package "password", I am not able to pull many of the session content in the backend ince these are 2 different apps (e.g. in the frontend I can simply say "req.user.username", but I am not to do so in the backend). In addition, the user will be able to see in his developer tools the AJAX requests I am issuing to the backend along with some params, which I don't want to happen.
Do you have any comments on the above or can you guide me with some other suggestions?
Thanks
I'm trying to understand how a MERN app fully works, I've been reading about MongoDB, ExpressJs, ReactJs and NodeJs, I also understand how MongoDB, ExpressJs and NodeJs interact and how ReactJs works on its own, my question is simple (I think).
The question:
If I create an API, using Node,Express and Mongo, and I have an APP managed by React, both need a server (via express, I understand), then, how should I run the API and the React app at the same time. Do I need different URLs? should I configure different ports? how should I integrate them?
I really been reading a lot, but almost every tutorial is made locally (and I'm working in a server with Passenger and I can't change the way it starts), just for Node/Express(with pug or else)/Mongo or just React, and I don't understand how to connect the API and React.
Thanks
It depends on several factors: environment (e.g. development, production), and your control over the server. For development, you can have two different URLs and use something like Webpack Dev Server. Normally you would have the module bundler, e.g. Webpack, watching for changes in your React code. However, this can get more complex if you have Server Side Rendering.
For production, normally you would have the bundled file for your client side application already optimized and minified. If you can change your API, you could serve it statically in a new endpoint, for example: /static/bundle.js and request this endpoint from your index.html file, which will be sent by Express.js server when accessing /.
However, because you will probably want to have routes in your React app, your server will need to know how to handle the client app routes (for example app.get('/*', () => ...), and they could collide with your API endpoints. To solve this, you could:
Prefix your API endpoints with a namespace, e.g. /api/v1/...
Place the API in a different URL, port or subdomain. In this case you would indeed need to run these two servers in parallel. With Node.js, there are helpers to make this more convenient, e.g. concurrently.
Pulling out your concerns: API, React, and Integration for MERN app.
I use three approaches
1) Use foreman. With this, you can specify your API and Web Client in the Procfile. I used it here
2) Use a proxy to handle requests that require your API. So in package.json, you specify your API URL(your API must be running)
// package.json
.......
.......
"proxy": "<path to url:[port no if you're developing locally]>"
Check here.
And you can simply add a script to run your API and React concurrently.
3) Set your API and React app in a Docker container. mern-starter is a perfect place to check for this.
Hope this helps!