POSTはhttp：// localhostを：4200/addTask 404（見つかりません）Angular2で、ノードがJSが、値が

Question

app.component.ts

import { Component } from '@angular/core'; 
import { CharityService} from './app.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [CharityService] 
}) 
export class AppComponent { 
    title = 'app'; 

    [x: string]: any; 

     fname : string; 
     lname : string; 
     age : string; 
     address: string; 
     city : string; 



     constructor(private charityService:CharityService){ 
    /*   this.taskService.getTasks() 
       .subscribe(tasks => { 
        console.log(tasks); 
       }); */ 
     } 

     addTask(event : any){ 

      var tasks = { 
       fname : this.fname, 
       lname : this.lname, 
       age  : this.age, 
       address : this.address, 
       city : this.city 
      } 

      console.log(event , tasks); 
      //console.log(this.userForm.value); 
       this.charityService.addTask(tasks).subscribe(data => { 
        console.log('Successful') 
       }) 
     } 
} 

app.services.ts

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class CharityService { 

    constructor(private http: Http) {} 


    addTask(tasks){ 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this.http.post('http://localhost:4200/addTask', JSON.stringify(tasks), { headers: headers }) 
     .map(res => res.json()); 
    } 
} 

コンソールに印刷します

api.js

var express = require('express'); 
var router = express.Router(); 

var task = require('../models/model') 
//var Model = require('../models/model.js'); 

router.post('/addTask', function(request, response) { 
    var task = new Model(request.body); 
    task.save(function(err, resource) { 
     if (err) { 
      response.send(err).status(501); 
     } else { 
      response.json(resource).status(201); 
     } 
    }); 
}); 


module.exports = router; 

model.js

var mysql = require('mysql'); 
/* var Schema= mysql.Schema; 

var CharitySchema = new Schema({ 
    fname : String, 
    lname : String, 
    age  : String, 
    address : String, 
    city : String 
}); 

var Model = mysql.Model('task',CharitySchema); 

module.exports = Model; */ 

var connection = mysql.createConnection({ 
    host  : 'localhost', 
    user  : 'root', 
    password : '', 
    database : 'charity_project' 
    }); 

    connection.connect(function(err){ 
    if(!err) { 
     console.log("Database is connected ... nn");  
    } else { 
     console.log("Error connecting database ... nn");  
    } 
}); 

module.exports.addTask = function(tasks, callback) { 
    connection.query("INSERT INTO registration SET ?", tasks, callback); 
} 

app.component.html

<div class="container"> 
    <h2 align="center"><u>Registration Form</u></h2> 


<br> 
<div class="container"> 
    <form class="form-horizontal" #userForm="ngForm" (ngSubmit)="addTask($event)" > 

     <div class="form-group"> 
      <label class="control-label col-sm-2" for="firstName">First Name:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" [(ngModel)]='fname' name="fname" required> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-sm-2" for="lastName">Last Name:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" [(ngModel)]='lname' name="lname" required> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-sm-2" for="age">Age:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" [(ngModel)]='age' name="age" required> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-sm-2" for="address">Address:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" [(ngModel)]='address' name="address" required> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-sm-2" for="city">City:</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" [(ngModel)]='city' name="city" required> 
      </div> 
     </div> 

      <br> 
      <div class="form-group">   
      <div class="col-sm-offset-2 col-sm-10"> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </div> 
      </div> 
     </form> 
</div> 

server.js

var express = require('express'); 
var morgan  = require('morgan'); 
var bodyParser = require('body-parser'); 
var mysql  = require('mysql'); 
var path  = require('path'); 

var mainRouter = require('./routes/index'); 
var apiRouter = require('./routes/api'); 


var app = express(); 
app.use(morgan('dev')); 






app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

app.use((express.static(path.join(__dirname, 'src')))); 

app.use('/', mainRouter); 
app.use('/api', apiRouter); 


port = process.env.PORT || 4200; 

app.listen(port, function() { 
    console.log("listening to port " + port); 
}) 

ない展開エラー。 ここで、私がデータを入力すると、それはコンソールに印刷されます。しかし、それはデータベースに向けられません。 http://localhost:4200/addTask 404（見つからない）と表示されます。また、 core.es5.js：1020 ERRORレスポンス{_body： "↵xx↵POST /addTask↵↵"、ステータス：404、ok：false、statusText： "Not Found"、ヘッダー：ヘッダー、...}

Answer 1

あなたはapp.use('/api', apiRouter);

でルート内のAPIを追加しているとして、http://localhost:4200/api/addTaskのためにしてみてください、私はあなたが角度の開発のための角度CLIを使用してng serveを経由して、あなたの角度のプロジェクトを実行している、と仮定します。これが当てはまる場合、ノードjsアプリケーションポートを4200に保つことはできません。角度cliはデフォルトでそれを使用します。これは、他のポートを使用するように設定するまでです。

私の提案は、あなたのノードjsアプリケーション用のいくつかの他のポート番号です。

新しいURLは

http://localhost:<new-port>/api/addTaskがあなたのノードのjsのアプリindex.jsユーザーが定義急行ルータで

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, Authorization"); next(); });

Answer 2

に以下のコードを入れてくださいいない場合は、CORSの設定を行っているホープでなければなりませんlocalhost：4200/api/addTaskとあなたの角度呼出しlocalhost：4200/addTask