im trying to deploy a simple MERN app with a Vercel front end and Railway back end, working perfectlly in localhost,
so far the backend part seems ok, it works as expected with MongoDB and Postman.
The problem im facing is that whenever I make a request from Vercel, it makes the Request URL start with the client and then the server URL.
For example the Request Url I need (and working with Postman) would be: /backend-production.up.railway.app/movements/
Instead im getting this kind of request: https://client.vercel.app/backend-production.up.railway.app/movements,
No idea why is Vercel using both client+backend URLS and mixing them up like that.
My front end routes look like this:
const response = await axios(`${URL}/movements/`);
where I import ${URL} as "backend-production.up.railway.app"
Thanks in advance and let me know if I can explain myself better if needed.
I recommend adding https:// to your backend URL so will look like
https://backend-production.up.railway.app
Related
I'm very new so sorry about this...
Basically, I am trying to replicate a blog from a youtube tutorial - however there was nothing available on how to deploy the application so I'm trying to replicate it as much as I can.
I successfully deployed both the backend and frontend separately on render, then I changed the axios URL to link with the backend. I then type the backend URL with /api/posts and it retrieves the posts in the DB so I am not sure what else I am missing out on if someone could help me that would be great.
Frontend
Backend
Ignore the added extra frontend folder in the backend folder as that was an accident... If that has an effect on this?
Thank you.
ERROR: everydaybeing.onrender.com/auth/register:1
Failed to load resource: the server responded with a status of 404 ()
Tried to link the frontend to backend but unsuccessful
I know there are a lot of similar posts out there yet after reading as many as I could find I am still left with questions.
I have a site set up with a node server running on port 5000 and React running on port 3000. I am using multer to upload user selected images from the front end and save them in the file system on the node backend side, which works perfectly fine.
My trouble lies in trying to get those same images and serve them back to the react front end to render on page. I have tried using express.static() to serve the images as several folks talk about doing but when I do so I don't know how to actually access those images from the front end, I couldn't find anyone talking about that part. When trying to access by the relative path from the front end I recieve net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200
My very rudimentary backend code:
router.get("/retrieve/:id", async(req,res) => {
const pathname = path.join(__dirname,"../userProjects/project_ted/photos/test.jpg")
app.use(express.static(pathname));
res.send(200);}
So my questions are:
Am I doing something fundamentally wrong here with having my front and back end running on two different ports and attempting to send a picture from the node side to the react side with express?
If I am not then what does the front end code look like to render a picture served from express?
To be clear I don't want to download the photo, I want to display it on the page.
Thanks in advance!
First, the app.use() is misplaced. It shouldn't be in a route callback.
As far as I understand you're trying to send a test image to all requests. If so, you can use Express' sendFile method for that:
router.get("/retrieve/:id", (req, res) => {
const pathname = path.join(__dirname,"../userProjects/project_ted/photos/test.jpg")
res.sendFile(pathname);
});
To access the image directly from the fronted do
<img src={'http://localhost:5000/userProjects/project_ted/photos/test.jpg'} alt="" />
This worked for me.
I'm building a desktop app using Electron and Vue as framework.
I also need to authenticate the user using Azure AD and I'm using msal-node.js as library to do that.
I'm able to authenticate with the server in azure and get the user info, but I cannot figure it out how to set the redirect URL.
First I have to say that the behaviour between dev and prod change drastically and I'm going to explain both scenarios and, in both of them I'm going to use history mode or not
DEV - using createWebHistory
Return Url in Azure and .env file: http://localhost:8080/
This is what I've got from the devTools during the normal navigation (no authenticated)
And this is what I've got after the authentication (the call to the API is successful):
Blank page in the app.
DEV - using createWebHashHistory
Return Url in Azure and .env file: http://localhost:8080/#/
After the authentication (failed):
Blank page in the app.
PROD
In prod I must use createWebHasHistory otherwise I've got blank page from the beginning.
The first problem I've got in production is the url itself.
When I create the window I call the following url:
await win.loadURL('app://./index.html')
In azure I cannot use the same url because it's not a valid url.
If I use just:
await win.loadURL('app://index.html')
I've got blank page
Any idea?
Thank you
The solution I've found it's pretty simple. Probably it's not the most "elegant", but it works, at least for prod. In dev I've still got the same weird problem described above.
Basically I'm starting a node server (localhost:3031 for example), within the app itself, then I'm catching the redirect url with it (localhost:3031/redirect) and serving the internal url from it:
expressApp.get('/redirect', async (req, res) => {
await win.loadURL('app://./index.html#about')
})
As I said, it works and I don't see any security issue with that, but, if you have any other idea or suggestion, please let me know.
Thank you
UPDATE
I've found the issue with Dev as well. In order to authenticate I'm using what Microsoft is suggesting in its documentation.
If you look at the file AuthProvider.js there is this portion of code, at the beginning:
const CUSTOM_FILE_PROTOCOL_NAME = process.env.REDIRECT_URI.split(':')[0];
Down below, in the method "getTokenIteractive" there is this other piece of code that applies the new protocol:
protocol.registerFileProtocol(CUSTOM_FILE_PROTOCOL_NAME, (req, callback) => {
const requestUrl = new URL(req.url)
callback(path.normalize(`${__dirname}/${requestUrl.path}`))
})
In Dev my REDIRECT_URI is "http://localhost:3031/redirect", but the app protocol must be "app" (or whatever you have chosen) in order to work with Vue. So, I've just wrapped this last method in a condition based on the environment and now everything works as expected everywhere.
I hope all this can be useful to someone.
I ran into a similar issue and your solution helped me out, thank you! Can I ask how you handled the logout redirect?
Also have you tried onBeforeRequest to handle the redirects, instead of a node server?
It was used as an example in an auth0 blog: https://auth0.com/blog/securing-electron-applications-with-openid-connect-and-oauth-2/
I am trying to connect an app hosted in my localhost:3000 port. The back-end is on the localhost:8080 port (not a remote API but on my own PC. I downloaded a pre-created back-end api and linked the front-end to the back-end with MongoDB using an .env file.
The weird thing is that on MongoDB the connection looks ok, following the tutorial I am using. The backend and the front-end also look alrigh, however, I am unable to login with the form in the screenshot.The error I get when trying to login or create a new user is "xhr.js:178 POST http://localhost:3000/login 404 (Not Found)"
It was a bit hard to put the whole code here, so I am linking you to the front-end repo: https://github.com/manuelalonge/complex-app and the back-end repo: https://github.com/manuelalonge/back-end-api
I can understand the issue is most likely on the back-end but I could not understand where exactly. I tried to get back to the previous lessons in the tutorial but it still doesn't get solved.
Probably it is easier to solve this issue with a screenshare session, so if anybody would contact me I'll be grateful.
Screenshot --> [1]: https://i.stack.imgur.com/jVJzn.png
Your screenshot points to what's wrong. You're posting to localhost:3000, as you know this is the frontend webpack server.
You'll want to create an axios config file and set a base url to hit the correct endpoint.
const axiosInstance = axios.create({
baseURL: 'localhost:8080'
});
export default axiosInstance;
Also, please add some sort of file structure.
I have an angular universal app set up. I do POST requests on the server-side using localhost to pre-render my app and this works fine.
An example working url would be http://localhost:8000/api/get-info.
I've now put the app into production on an external url (apache server). I'm also using ssl.
Now when I try to do a POST request on the server-side to pre-render my app, I get back a response with status: 0, url: null (I'm assuming this means the connection was refused).
An example non-working url would be https://mywebsite.com/api/get-info.
What really stumps me is that when the app loads on the client, all HTTPS requests start working. So the problem is I cannot get the express server to send POST requests to my external url.
I've tested a post request on the server-side to a different website (twitter), and that seems to work fine as well. So i'm not entirely sure where I've gone wrong.
I already have CORS set to '*' as well.
Try using
http://localhost:8000/api/get-info
in production as well. Since your Angular app is rendered on the same server as your API is running, using localhost should just work fine. It doesn't matter if you are on an external URL.
I do something similar (its a GET but that shouldn't matter) with my translations:
if ( this.isServer ) {
translateLoader.setUrl( 'http://localhost:4000/assets/localization/' );
} else {
translateLoader.setUrl( 'assets/localization/' );
}
It works locally and in production (both server and client).
I just encountered this problem myself for two days. Please take a look at my comment on https://github.com/angular/universal/issues/856#issuecomment-426254727.
Basically what I did was I did a conditional check in Angular to see if the APP is running in browser or in server (rendered by Angular Universal), and change my API endpoint to actual IP in https or localhost in http accordingly. Also in my Nginx setting, I only redirect incoming request from browser to https by checking if the server_name is localhost.
Hope it helps!