I'am using Angular2 to submit a POST Request to node Application/Server which is running on localhost:4000. But I keep getting 404 Error - Page not found.
The Node Sever/Application is running and I can test it via Postman...
I get Response as expected. just via Angular2 App is doesn't work.
Ang2 Code:
import { Component, OnInit } from '@angular/core';
import { MdRadioModule, MdButtonModule } from '@angular/material';
import { Http, Headers } from '@angular/http';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-signin',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
form: FormGroup;
name = new FormControl();
constructor(private http: Http, private fbuilder:FormBuilder) { }
ngOnInit() {}
login(mail:string, pass:string) {
let headers = new Headers();
let EMAIL_REGEXP = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i;
this.form = this.fbuilder.group({
email: mail,
password: pass
});
let formObj = this.form.getRawValue();
let serializedForm = JSON.stringify(formObj);
console.log( 'formObj: ' + formObj + '\n'
+ 'this.form: ' + this.form + '\n'
+ 'serializedForm: ' + serializedForm);
if (!EMAIL_REGEXP.test(mail)) {
return false;
} else if (pass === '') {
return false;
} else {
alert('Works!: ' + mail + 'pass: ' + pass);
headers.append('Content-Type', 'application/json');
this.http.post('http://localhost:4000/auth/sign_in', serializedForm, { headers })
.subscribe(
data => console.log('success!', data),
error => console.error('Error caused by: ' + error)
)
}
}
}
The View:
<section class="section--center" style="background-color:#fff;
margin:0 auto !important; box-shadow: 0 0 2px 0 #000000; height:auto; min-height:90%;">
<div class="login-form" layout="row" layout-align="space-around" layout-padding="layout-padding">
<md-card class="card">
<div md-toolbar>
<div class="md-toolbar-tools">
<h2><span>Login Form</span></h2>
</div>
</div md-toolbar>
<form #form="ngForm" method="POST">
<div style="padding:10px 0 10px 20px;">
<md-input-container>
<label>email:</label>
<input mdInput name="email" [(ngModel)]="email" #inputMail required
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
<md-error>
This field is required
</md-error>
</md-input-container>
</div>
<div style="padding:10px 0 10px 20px;">
<md-input-container>
<label>password:</label>
<input mdInput name="password [(ngModel)]="password" #inputPass required="" md-maxlength="16">
<md-error>
This field is required
</md-error>
</md-input-container>
</div>
<br>
<div class="button-row">
<button class="submit" md-button (click)="login(inputMail.value, inputPass.value)">Add</button>
</div>
</form>
</md-card>
</div>
</section>
Node: 'use strict';
var mongoose = require('mongoose');
var jwt = require('jsonwebtoken');
var bcrypt = require('bcrypt');
var User = mongoose.model('User');
//mongoose.Promise = global.Promise;
let mailer = require("nodemailer");
let smtpTransport = require('nodemailer-smtp-transport');
exports.sign_in = function (req, res) {
User.findOne({
email: req.body.email
}, function (err, user) {
if (err) throw err;
if (!user || !user.comparePassword(req.body.password)) {
return res.status(401).json({ message: 'Authentication failed. Invalid user or password.' });
}
return res.json(
{
token: jwt.sign(
{
email: user.email,
fullName: user.fullName,
_id: user._id
},
'RESTFULAPIs'
)
}
);
});
};
Node - server.js:
let express = require('express');
let bodyParser = require('body-parser');
let path = require('path');
let app = express();
let router = express.Router();
// DB Schema and User Schema
let Task = require('./public/js/_nodeTodos/todoListModel');
let User = require('./userDbModel');
// Routing Paths
let routes = require('./public/js/_nodeTodos/todoListRoutes');
// Mongo DB
let mongoose = require('mongoose');
// WebToken
let jsonwebtoken = require("jsonwebtoken");
// Server Port
let port = process.env.PORT || 4000;
mongoose.Promise = global.Promise;
// Connecting to "Tododb" Database
mongoose.connect('mongodb://localhost/Tododb');
// Add headers
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
app.use('/scripts', express.static(__dirname + '/node_modules/angular-utf8-base64/'));
app.use('/assets', express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(function (req, res, next) {
if (req.headers && req.headers.authorization && req.headers.authorization.split(' ')[0] === 'JWT') {
jsonwebtoken.verify(req.headers.authorization.split(' ')[1], 'RESTFULAPIs', function (err, decode) {
if (err) req.user = undefined;
req.user = decode;
next();
});
} else {
req.user = undefined;
next();
}
});
//let routes = require('./public/js/_nodeTodos/todoListRoutes');
routes(app);
app.use('/', function (req, res, next) {
console.log('Request Url:' + req.url);
next();
});
app.get('/apiPortal', function(req, res) {
//res.render('index');
console.log('The EndPoint: ' + req.url);
res.sendFile('index.htm', { root: __dirname + "/" } );
});
app.listen(port);
Any Idea what could be the reason pls.?
Access-Control-Allow-Origin*to your header?Access-Control-Allow-Originproblem it wouldn't throw a 404