So, Iv'e been trying to setup a small example of a server with 2 factor authentication features. I'm using nuxt as the frontend and flask as the backend.
While developing locally (using npm run dev) I was able to get the chain of communication to work:
The webpage sends a request to server/<some_request>/<some_param>
The proxy module redirects it to http://localhost:5000/<some_request>/<some_param>
The request is sent by the axios module
flask receives the request, processes it and answers.
When trying to deploy this application to a dreamhost server, I used npm run build and npm run generate to serve the website statically. I was able to receive my webpage when browsing.
But when trying to login, the chain described above broke, and requests to server/<some_request>/<some_param> were answered with 404. In the server's command line I saw that flask didn't receive any request, so I assume that this is some issue with the proxy module.
I'm not really sure how to debug this problem, so any help or ideas will be appreciated.
Okay, so I got everything working, and here are my conclusions:
The proxy module, makes the redirection in the client side, meaning that I would be trying to access my own machine when redirecting to localhost:5000, rather than to the server.
The proxy module can't be used when using npm run generate (there's a warning that says it's disabled).
Since I wanted to redirect to flask from the client side (browser), I couldn't just run it as is. I had to register another subdomain and use Passenger to deploy my app (A guide to enabling passenger, getting started with python in passenger and A great guide to deploying flask over passenger).
Related
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.
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.
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.
So I have a Nginx configured to forward requests trough port 433 (SSL) to localhost:3000 where react is running, react shall in turn post requests to a Node.js app running on the same VPS (localhost:8080) to make a stripe payment.
Everything work fine so far. The frontend is rendering, SSL working.
But when the i run axios.post with the payment data from React it never reaches the Node (as far as my logs tell me).
I have CORS setup in node to accept a bunch of "localhost" variants and the actual domain itself.
Why is this not working?
Thanks!
I should have been poitning the React app to the Url of the api, not its local adress on my VPS sorry.