How to connect my React app to a backend with which is different origin - node.js

Hello Experts
My problem is I am developing a react js application with some Axios call, I am connecting my serverside backend (which is an indifferent location like a real IP address) with writing a proxy in package.json which is working on my pc is fine,
But when I am going to deploy my application on AWS in production mode, unfortunately, the backend is not connecting (Maybe proxy is not working as I learn by google search ), in this situation what should I do to connect my react js app with my backend
please help me if you can thanx in advanced

Usually browsers block cross-origin request by default.
Please check cors npm package to whitelist/allow requests from your react app to backend server.
link: https://www.npmjs.com/package/cors
Hope this helps. :)

Related

Penetration test of React + Node.js website, what to do

I have a upcomming pen test in a few weeks. And I'm wondering what is the most important and basic things that I can do to secure my website.
The site is built with React as the front end. It communicates with a Node.js backend with express as a middlewear. The backend sends requests to our companies api, so the api request urls are hidden by the backend.
The frontend is hosted with NGINX on a remote server with the Node.js backend running with PM2. So far I have implemented the npm Helmet to mask that I am using express as a middlewear and protected inputs from SQL-injections. Ist there anyting else I am missing?
Thanks for your time

Websocket not working in React.Js production build

I created a react App which talks to a node back-end. Everything works fine in development mode. The connection between the front-end and back-end is made through websocket.
Most interesting thing is, that after doing yarn build to create the production build of the app, all the pages work fine. The only thing is that, the page that integrates connection with the back-end is returning error when I inspected it in the browser. I am using Apache Server to run the build version of the app on localhost.
I am using Apache server since python server throws errors on page refresh.
Below is the screenshot. As you can see, node server command, return the expected response from the backend app. The structure of the app is also shown; revealing the relationship between the front-end (smartschool and smartresult) and back-end (smartapi). Only the smartresult makes the request to back-end. How do I resolve this connection problem? Any help will be appreciated. Thank you.

React Frontend integrated with Go API different ports problem

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.

Deploying React native app with node server to the store

I feel like I have exhausted all possible searches and documentation trying to figure this out. I have a React native app which runs perfectly locally with a node server with websockets, I will like to know steps on how I could deploy this app to the store. I understand the server has to be hosted for example on heroku, but the workaround of the whole process from local server to heroku, then AppStore still confuses me. I will appreciate any suggestions, or clarification on how I could achieve this(deploying server and connecting to React native). Thanks
Host your Node.js server;
Use the remote server's endpoint on the app;
This can be useful to have a dynamic endpoint (dev and production env):
const endpoint = __DEV__ ? 'http://localhost:8080' : 'https://myServer/';
After your app get published on App Store it will communicate with remote server.

Connecting frontend (react) to backend (node) using codesandbox

I am using react, graphql and node. Currently, my react codes are on codesandbox, whilst my server codes are on my local computer. How do i link up my frontend with my backend in this case? Do i need to deploy my server codes onto heroku or digital ocean before i can link them? I like to be able to test them first before deploying my codes
I am also thinking of migrating my backend codes to codesandbox. In this case, am i still able to link my frontend and backend codes in order to test them out before deploying to the hosting provider servers?
Thanks
Charlie is correct. I actually build my react frontend on codesandbox and connected to my node graphql backend on codesandbox too. Both must be running for that to work. Must enable cors too for both to connect. As im using apollo server 2, can pass a cors: true to the apollo server constructor.

Resources