Trouble with getting data from nodejs/express because of CORS - angularjs

Solution here: Trouble with getting data from nodejs/express because of CORS
So i have a problem with getting data from nodejs/express because of CORS.
I'm getting error something like this (sorry, error i translated with google):
Query from an external source is blocked: one source of policy prohibits reading remote resource on http://localhost:8080/api/login. (Cause: Failed to query CORS).
I'm trying to send query with angular $http.post
$http.post($rootScope.api + 'login', {
email: form.email.$viewValue,
password: form.password.$viewValue
}).then(function(data) {
console.log(data.data);
});
Here is my server code (i cut some code, because i think it not important):
/* some nodejs requires */
var cors = require('express-cors');
mongoose.connect('mongodb://localhost:27017/batarindashboard');
require('./config/passport')(passport);
/* some express settings */
app.use(cors({
allowedOrigins: [
'localhost:*', '127.0.0.1:*'
]
}));
var port = process.env.PORT || 8080;
var router = express.Router();
router.use(function(req, res, next) {
console.log('Something is happening');
next();
});
/* sign up api */
router.post('/login', passport.authenticate('local-login', {
failureRedirect : '/api/passport_message',
failureFlash : true
}), function(req, res) {
res.json({
'message': 'You successfully signed in!'
});
});
/* passport_message api */
/* is_logged_in api */
/* logout api */
app.use('/api', router);
app.listen(port);
console.log('Magic happens on port ' + port);
And passport file (maybe problem is here. Why not?)
var LocalStrategy = require('passport-local').Strategy;
var User = require('./../app/models/user');
module.exports = function(passport) {
/* some serialize deserialize code */
/* sign up strategy */
passport.use('local-login', new LocalStrategy({
usernameField: 'email',
passwordField: 'password',
passReqToCallback: true
}, function(req, email, password, done) {
User.findOne({
'local.email':email
}, function(err, user) {
if(err) return done(err);
if(!user) {
return done(null, false, req.flash('message', 'No user found.'));
}
if(!user.validPassword(password)) {
return done(null, false, req.flash('message', 'Oops! Wrong password.'));
}
return done(null, user);
})
}))
};

Related

Axios post error

I am trying to post to my api endpint, I get the error:
Uncaught (in promise) Error: Network Error
at createError (C:\sites\LYD\node_modules\axios\lib\core\createError.js:16)
at XMLHttpRequest.handleError (C:\sites\LYD\node_modules\axios\lib\adapters\xhr.js:87)
My axios post is:
submitForm(UserDetails) {
let self = this;
self.show();
axios
.post('http://localhost:3001/api/users', UserDetails)
.then(function(response) {
self.hide();
});
}
My node error is:
C:\sites\LYD>node server
api running on port 3001
(node:11808) DeprecationWarning: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html
events.js:160
throw er; // Unhandled 'error' event
^
TypeError: First argument must be a string or Buffer
at ServerResponse.OutgoingMessage.end (_http_outgoing.js:555:11)
at C:\sites\LYD\server\index.js:75:20
at C:\sites\LYD\node_modules\mongoose\lib\model.js:3809:16
at C:\sites\LYD\node_modules\mongoose\lib\services\model\applyHooks.js:164:17
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
Any ideas?
My server.js is:
//first we import our dependencies...
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const User = require('../models/users');
//and create our instances
const app = express();
const router = express.Router();
//set our port to either a predetermined port number if you have set it up, or 3001
const port = process.env.API_PORT || 3001;
//db config -- REPLACE USERNAME/PASSWORD/DATABASE WITH YOUR OWN FROM MLAB!
const mongoDB =
'mongodb://dxxx#aws-eu-west-1-portal.4.dblayer.com:10204/xxx?ssl=true';
mongoose.connect(mongoDB, { useMongoClient: true });
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
//now we should configure the APi to use bodyParser and look for JSON data in the body
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//To prevent errors from Cross Origin Resource Sharing, we will set our headers to allow CORS with middleware like so:
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader(
'Access-Control-Allow-Methods',
'GET,HEAD,OPTIONS,POST,PUT,DELETE'
);
res.setHeader(
'Access-Control-Allow-Headers',
'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
);
//and remove cacheing so we get the most recent comments
res.setHeader('Cache-Control', 'no-cache');
next();
});
//now we can set the route path & initialize the API
router.get('/', function(req, res) {
res.json({ message: 'API Initialized!' });
});
//adding the /comments route to our /api router
router
.route('/users')
//retrieve all comments from the database
.get(function(req, res) {
//looks at our Comment Schema
User.find(function(err, users) {
if (err) res.send(err);
//responds with a json object of our database comments.
res.json(users);
});
})
//post new comment to the database
.post(function(req, res) {
var NewUser = new User();
req.body.accessCode ? (NewUser.accessCode = req.body.accessCode) : null;
req.body.age ? (NewUser.age = req.body.age) : null;
req.body.drinkConcern
? (NewUser.drinkConcern = req.body.drinkConcern)
: null;
req.body.drinkOften ? (NewUser.drinkOften = req.body.drinkOften) : null;
req.body.ethnicity ? (NewUser.ethnicity = req.body.ethnicity) : null;
req.body.gender ? (NewUser.age = req.body.gender) : null;
req.body.language ? (NewUser.language = req.body.language) : null;
NewUser.save(function(err) {
if (err) res.end(err);
res.json({ message: 'Comment successfully added!' });
});
});
//Adding a route to a specific comment based on the database ID
router
.route('/users/:id')
//The put method gives us the chance to update our comment based on the ID passed to the route
.put(function(req, res) {
Comment.findById(req.params.id, function(err, user) {
if (err) res.send(err);
//setting the new author and text to whatever was changed. If nothing was changed
// we will not alter the field.
req.body.author ? (comment.author = req.body.author) : null;
req.body.text ? (comment.text = req.body.text) : null;
//save comment
user.save(function(err) {
if (err) res.send(err);
res.json({ message: 'Comment has been updated' });
});
});
})
//delete method for removing a comment from our database
.delete(function(req, res) {
//selects the comment by its ID, then removes it.
User.remove({ _id: req.params.comment_id }, function(err, user) {
if (err) res.send(err);
res.json({ message: 'Comment has been deleted' });
});
});
//Use our router configuration when we call /api
app.use('/api', router);
//starts the server and listens for requests
app.listen(port, function() {
console.log(`api running on port ${port}`);
});
I have changed my axios post to this:
let self = this;
self.show();
const headers = {
'Content-Type': 'application/json',
};
axios
.post('http://localhost:3001/api/users', UserDetails, headers)
.then(function(response) {
self.hide();
});
You can change the mongoose query to,
let query = {} //or any other query
User.find(query,function(err,res){
...
})
I think the problem is with your routes.
When you create a route instead of using router.route('/route').post(function(req, res) { ... }, use router.post('/route', function(req, res) { .... } (obviously change .post to the method you want to use)
In your code this would be:
router
.get('/users', function(req, res) {
User.find(function(err, users) {
if (err) res.send(err);
res.json(users);
});
})
I think you can only do app.route('/route').get(...).post(...) but not with router
Look at the express routing documentation for more info: https://expressjs.com/en/guide/routing.html

AngularJS bad POST request with Express / Passport

Trying to authenticate with passport via AngularJS. I've found a lot of threads saying that the issue is the default Content-Type of the request. Tried a couple of ways and I always get a 400 Error (Bad Request).
$http.post('/login', {
username: $scope.user.username,
password: $scope.user.password
})
.success(function(user) {
console.log('success');
// $location.url('/');
})
.error(function() {
console.log('failed');
// location.url('/login')
})
[Snipped some stuff that I don't think is the issue]
UDPATE: I think this might be an issue with passport. Using the body-parser middleware, I'm able to tell that I'm sending the data in the following format:
{ username: me, password: 12345 }
Alas, I still get the error code 400.
var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
app.post('/login', jsonParser, function(req,res) {
if (!req.body) {
console.log('no body');
return res.sendStatus(400);
}
console.log(req.body);
res.end(req.user);
});
Here's the local strategy
passport.use(new LocalStrategy(
function(username, password, done) {
if (username === "me" && password === "123") {
return done(null, {name: "me"});
}
return done(null, false, {message: 'Incorrect username or password.'});
}
));
And the route for when I try to get passport to work.
app.post('/login',passport.authenticate('local'), function(req,res) {
console.log('login in server.js')
res.send(req.user);
});
Pretty sure this is all standard, based on everything I've read.
Needed this...
var bodyParser = require('body-parser');
app.use(bodyParser.json());

Node / Angular Authentication

I'm trying to figure out how to authenticate a user using node.js and angular.js. I have a node server which has a route pointing to api/login. Users can register and log in everything works. But when I get to the client side, I have no idea where to go. I have set up a http interceptor which send the user back to the login page if a session doesn't exist. I am currently using session express. Below are snippets of my code:
Login Route:
router.post('/login', function(req, res, next) {
var username = req.body.username;
var password = req.body.password;
User.findOne({username: username, password: password}, function(err, user) {
if(err) {
console.log(err);
res.status(500).send();
}
if(!user) {
res.status(404).send();
} else {
console.log('Set' + user);
req.session.user = user;
res.status(200).send();
}
});
Protecting this endpoint:
app.get('/api/endpoint', function(req, res) {
if(!req.session.user) {
console.log('Unauthorized');
res.status(401).send();
} else {
console.log('Logged in');
res.status(200).send();
}
});
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use('/api', require('./routes/login'));
app.use('/api', require('./routes/register'));
app.listen(port);
I'm not sure if this is detailed enough but I know there's something really simple going wrong here I just cannot see it haha! Any help would be greatly appreciated!

How to pass JsonWebToken x-access-token through angular js

I created a node express RESTful API with jsonwebtoken as authentication method. But unable to pass the x-access-token as headers using angular js.
my JWT token authentication script is,
apps.post('/authenticate', function(req, res) {
// find the item
Item.findOne({
name: req.body.name
}, function(err, item) {
if (err) throw err;
if (!item)
{
res.json({ success: false, message: 'Authentication failed. item not found.' });
}
else if (item)
{
// check if password matches
if (item.password != req.body.password)
{
res.json({ success: false, message: 'Authentication failed. Wrong password.' });
}
else
{
// if item is found and password is right
// create a token
var token = jwt.sign(item, app.get('superSecret'), {
expiresIn: 86400 // expires in 24 hours
});
res.json({
success: true,
message: 'Enjoy your token!',
token: token
});
}
}
});
});
Middleware which checks the token is correct is,
apps.use(function(req, res, next) {
// check header or url parameters or post parameters for token
var token = req.body.token || req.params.token || req.headers['x-access-token'];
// decode token
if (token)
{
// verifies secret and checks exp
jwt.verify(token, app.get('superSecret'), function(err, decoded) {
if (err)
{
return res.json({ success: false, message: 'Failed to authenticate token.' });
}
else
{
// if everything is good, save to request for use in other routes
req.decoded = decoded;
next();
}
});
}
else
{
// if there is no token
// return an error
return res.status(403).send({
success: false,
message: 'No token provided.'
});
}
});
Finally the GET method script is,
app.get('/display', function(req, res) {
Item.find({}, function(err, items) {
$http.defaults.headers.common['X-Access-Token']=token;
res.json(items);
});
});
But it always failed to authenticate. Please any one help me to solve this issue. I am really stucked here.
It always shows only the following authentication failed message.
{"success":false,"message":"No token provided."}
If you use $http as the dependency in your angular controller then this would help you I guess -
var token = this.AuthToken.getToken();
$http.get('/api/me', { headers: {'x-access-token': token} });
I will change this according to your code once you upload your angular code.
The client should be sending the token in the Authorization header, using the Bearer scheme, as 'X-' headers have been deprecated since 2012:
Your node would now be along the lines of:
apps.post('/authenticate', function(req, res) {
.....
var token = 'Bearer' + ' ' + jwt.sign(item, app.get('superSecret'), {
expiresIn: 86400 // expires in 24 hours
});
.....
}
apps.use(function(req, res, next) {
// Trim out the bearer text using substring
var token = req.get('Authorization').substring(7);
....
}
Then your angular code would become:
var token = this.AuthToken.getToken();
$http.get('/api/me', { headers: {'Authorization': token} });
You could create a interceptor that catches all ajax calls and injects the token into the header. That way you would not have inject it every time you make an ajax call.
This is a good place to start if you wanted to go that route:
http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

CORS issue when combining AngularJS with PassportJS

I'm trying to combine ExpressJS + PassportJS with Angular SPA application. The problem probably is in CORS headers.
Here is what I'm trying to accomplish:
Client View:
<a class="btn btn-block btn-social btn-twitter" ng-click="twitter()">
<i class="fa fa-twitter"></i> Sign in with Twitter
</a>
Client Controller:
Is the following approach correct?
$scope.twitter = function() {
$http.get('oauth/twitter').then(function(res) {
// Fetch the user from response and store it somewhere on the client side
});
};
The server side responsible for handling authentication looks as follows:
Server routes:
app.get('/oauth/twitter', passport.authenticate('twitter', {
failureRedirect: '/signin'
}));
app.get('/oauth/twitter/callback', passport.authenticate('twitter', {
failureRedirect: '/signin',
successRedirect: '/'
}));
Twitter strategy:
passport.use(new TwitterStrategy({
consumerKey: config.twitter.clientID,
consumerSecret: config.twitter.clientSecret,
callbackURL: config.twitter.callbackURL,
passReqToCallback: true
}, function (req, token, tokenSecret, profile, done) {
var providerData = profile._json;
providerData.token = token;
providerData.tokenSecret = tokenSecret;
var providerUserProfile = {
fullName: profile.displayName,
username: profile.username,
provider: 'twitter',
providerId: profile.id,
providerData: providerData
};
users.saveOAuthUserProfile(req, providerUserProfile, done);
}));
Users Server Controller:
exports.saveOAuthUserProfile = function (req, profile, done) {
User.findOne({
provider: profile.provider,
providerId: profile.providerId
}, function (err, user) {
if (err) {
return done(err);
} else {
if (!user) {
var possibleUsername = profile.username || ((profile.email) ? profile.email.split('#')[0] : '');
User.findUniqueUsername(possibleUsername, null, function (availableUsername) {
profile.username = availableUsername;
user = new User(profile);
user.fullName = profile.fullName;
user.save(function (err) {
if (err) {
var message = getErrorMessage(err);
req.flash('error', message);
return done(err);
}
return done(err, user);
});
});
} else {
return done(err, user);
}
}
});
};
When I click Sign in with Twitter in a browser (Chrome/Firefox) I see the following requests being made:
GET http://localhost:3000/oauth/twitter (302 Moved Temporarily)
GET https://api.twitter.com/oauth/authenticate?oauth_token=Zz014AAAAAAAg5HgAA******** (307 Internal Redirect)
The browser complains about missing "Access-Control-Allow-Origin" headers.
To fix this I have tried using cors package like this
var cors = require('cors');
api.use(cors());
and also manually setting headers of all responses, with no effect.
Could you please show me the way?
Regards
Instead of using cors module,try to set header in nodejs
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
I faced with a similar problem and couldn't fix it within the code. So I found this Chrome extension: Allow-Control-Allow-Origin: *
You can set URL patterns and enable Cross-Origin Resource Sharing.
Don't forget to disable it when you finish your work!

Resources