Internal server error 403 on deploying react app served via expressjs - javascript

I am trying to serve a build react application using expressjs. the react application is built and the index.html is served from my expressjs using:
app.use('/', express.static('reactapp/build'))
The application is simple. it contains a number of cards which when pressing navigates to another page changing the route. Before clicking, it is suppose localhost:3000/lists and after clicking any cards, it routes to localhosts/lists/1, 1 being an id. Now, when i try to refresh the page after pressing the any one of the cards, i get "no handler found for the path"(because it is client side url i suppose and isnot handled by express). the last app.use gets triggered.
app.use((req, res) => {
res.status(404).json({message: `No handler for ${req.url}`, requestHost: req.baseUrl})
})
therefore, what i did was, i sent the index.html inside this middleware part to fix my issue.
app.use((req, res) => {
res.sendFile(path.join(__dirname,"..\\reactapp\\build","index.html"));
})
it solved the problem locally but after deploying i get the "internal server error of status code 403". i am not knowing what the problem is. according to a site: The 403 (Forbidden) status code indicates that the server understood the request but refuses to authorize it...If authentication credentials were provided in the request, the server considers them insufficient to grant access.
Could someone help me out? i am not much familiar with expressjs so i wanted some help on what might be the reason.

res.sendFile(path.join(__dirname,"..\reactapp\build","index.html"));
the way path is setup, doesnot work for linux machines. that might be the reason.

Related

Redirect from non-existing route in node?

In my app, if I try to enter some non-existing route, lets say - www.mydomain.com/nonExistingRoute Im getting a blank page with text: Cannot GET /nonExistingRoute/.
What's more - if I do it locally (when running app in development mode, on localhost) if I do the same, it enters correctly / route (coz ive set it in client side routing). But it doesnt work properly in production mode (on my domain).
My app config in app.js in node:
app.use('/api', apiRouter); // only api responds
app.use('*', express.static('public')); // serving static files
Note: I have server-side rendering active. So every route, like / is pre-rendered on server side.
What can I do that if someone gets non existing route (but without /api), he gets redirected to /?
Thanks!
Just add this as the last rule:
app.use((_, res) => res.redirect("/"));

Node URL gets "undefined" added to URL path

I have a site that exists on a dev, staging and production server. On the dev and staging server the functionality is 100% fine, however on the production server the strangest thing happens - "undefined" gets added to the URL path.
Here is the short example of what is happening:
In the index.html I have an anchor tag to logout of a session with passport: Logout.
It goes to this route on my node server:
// passport oauth logout
routes.get('/auth/logout', (req, res) => {
req.session.destroy((e) => {
req.logout();
res.redirect(config.redirects.env.prod);
});
});
On dev and staging this destroys the session and redirects you to /. On production, when you click the button it takes you to this URL randomly https://somesite.com/auth/undefined.
Any ideas on how to debug this? It is making no sense to me and there's nothing I'm finding serverside or in the markup that would cause this, especially since it is functional on dev and staging. All servers are Ubuntu servers set up exactly the same way.
I was able to resolve this. Oddly enough, 400 lines down in a completely unrelated route used for file uploads, I had a line of code that referenced config.redirects.env.production instead of config.redirects.env.prod. I wasn't even looking at that route because it wasn't even part of functionality i was testing at the moment and I saw no errors spit out (again, since the route wasnt being referenced/used yet).
Fixing that typo resolved this bizarre issue of "undefined" being inserted into the URL. Still not sure how it managed to bubble up like that.

VueJs 2, NodeJs and reload page

I have a question with VueJs and the refreshing page. When I refresh my VueJs app with specific URL (for example : /tag/1), an error occurs : "Uncaught SyntaxError: Unexpected token <".
My server is created with NodeJs and I use ExpressJs. My templating engine is EJS.
I have defined a route :
app.get('*', (request, response) => {
response.render('layouts/index')
})
In the documentation for ExpressJs, it's possible to use a plugin "connect-history-api-fallback" to replace ".htaccess" of Apache but this cannot work.
let app = express()
app.use(history({
verbose: true,
index: '/'
}))
What is the issue ?
Thanks,
This is happening because your client app (vue.js) is expecting to receive some valid JSON object, but your server is giving a HTML page.
When attempting to convert some string like <html><head>... into a javascript object, your JSON parser fails and gives that error. To replicate this locally, open your developer console and run the following command:
JSON.parse("<html></html>")
To find out what exactly is going wrong, you need to look into the network tab of developer console and look at the server responses for API requests - you expect JSON but server might be serving index.html
Assuming your server side is all good and handles API requests as expected, then it might be a simple error in your vue component - instead of loading your tag data from /api/tag/1 (which gets a valid JSON string), you might be attempting to load /tag/1 (which will only get your index.html).

Passport facebook authentication not working

I have a nodeJS application (express), which has a facebook login. I'm using the passport-facebook authentication, described in here passport-facebook. My login was still working couple weeks ago ok, but now something has changed. I'm not sure if Facebook has changed something, or if I have. I haven't touched to any of the login code, so I suspect it is something in the facebook's end.
Here is my authentication code:
router.get('/', passport.authenticate('facebook'), function(req, res){
});
router.get('/auth/facebook/callback', passport.authenticate('facebook', {
failureRedirect: '/' }),
function(req, res) {
res.redirect('/calendar');
});
Basically, I want the app to automatically authenticate the user from the root of the app, and then redirect after the authentication to /calendar.
The symptons are following: If I try to go to the root and I haven't logged in with facebook earlier, then it will take me to the normal facebook login screen, as it should. But then on that screen, there is a warning of:
Given URL is not permitted by the Application configuration
One or more of the given URLs is not permitted by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
I checked all questions related to this, and it seems it is because I haven't configured the app domain and site url properly in the facebook app configuration. But they should be all fine: app domain: localhost, site url: http://localhost:3000/
So I don't know why it is complaining about it? I do not have any subdomains. The only routes I do have are: (/, /calendar, /calendar/events). The last /calendar/events routes are ajax routes. Anyways, after I enter my facebook credentials and login, then the page will redirect me to a empty page, with url: (https://www.facebook.com/login.php?login_attempt=1). I opened the developer's tools, and I see one error message in its console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
But, now I am actually logged in. Because if I now go to root or to /calendar, it will take me to correct page and show I'm logged in properly. So apparently the log in works, but there are some issues with redirection and allowed URL's. I just don't seem to know what and why. I'm using mongodDB as database.
It could be because of what site you have registered in your app. If you have registered it to http://localhost:3000/ you should work with domain localhost that for the callback. And if you have registered it as http://127.0.0.1:3000/ then you should work with 127...
I have no idea why this even worked, but I found a solution. Previously, I had configured valid OAuth redirect URI to be http://127.0.0.1:3000/auth/facebook/callback, and it was working all good. Now I changed it to use localhost instead of 127.0.0.1:3000, and that seemed to do the trick. Now everything is working as expected, though I don't know why. If someone is able to clearly tell me why, I will mark that as the correct answer.

Listen for a webhook server side using meteor

I've set up a meteor app using iron-router and I want the app to listen to a webhook from another service (basically I'm building an API for other services to use)
So for example, when an external website calls myapp.meteor.com/webhook I want to catch that specific link and parameters and do stuff with the data.
Update: Thanks to a comment I found this: https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#server-routing
Router.route('/webhooks', { where: 'server' })
.post(function () {
console.log(this);
this.response.end('Caught you\n');
//this.response.status(200).json({text:"Todo added"});
});
I added the above in the /server folder as there is no need to for the front-end server to worry about this like mentioned in the comment. But when I load this using postman POST request, it just returns my HTML for not found. Any ideas?
Thanks in advance for your help.
UPDATE
I tried what #David said and still I get the template loaded and nothing in the console. Any idea what I'm doing wrong?
Your server route will only run if no client routes also match. I suspect you have a catch-all route which is executing on the client and preventing the server route from running. One solution is to define all of the routes in a common folder like /lib so that you can properly order them. Your routes file could look something like:
client route 1
client route 2
server route 1
server route 2
catch-all (not found) route

Categories