角2：EXCEPTION：意外標記<在JSON在位置0

Question

我想實現一個REST API到我的角2的代碼，但我有問題，通過角

正從明確的數據。當我刪除角度組件沒有錯誤，所以最有可能導致問題。我還可以通過服務器的路由http://localhost:3001/task使數據通過快遞

recived訪問數據這是我server.js

 'use strict'; 
const express = require('express'); 
const app = express(); 
const jwt = require('express-jwt'); 
const cors = require('cors'); 
const bodyParser = require('body-parser'); 
const multer = require('multer'); 
const path = require('path'); 

var tasks = require('./routes/tasks'); 

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

app.use('/tasks', tasks); 



// Set Static Folder 
app.use(express.static(path.join(__dirname, 'client'))); 


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


const authCheck = jwt({ 
    secret: new Buffer('0u33qUTwmPD-MFf56yqJ2DeHuQncgEeR790T3Ke1TX3R5R5sylVfUNlHWyqQS4Al', 'base64'), 
    audience: 'PBNaD26w0HdAinA5QFSyABjWZNrZSx9M' 
}); 




const upload = multer({ 
    dest: 'uploads/', 
    storage: multer.diskStorage({ 
    filename: (req, file, cb) => { 
     let ext = path.extname(file.originalname); 
     cb(null, `${Math.random().toString(36).substring(7)}${ext}`); 
    } 
    }) 
}); 

app.post('/upload', upload.any(), (req, res) => { 
    res.json(req.files.map(file => { 
    let ext = path.extname(file.originalname); 
    return { 
     originalName: file.originalname, 
     filename: file.filename 
    } 
    })); 
}); 

app.get('/api/deals/public', (req, res)=>{ 
    let deals = [ 
    { 
    id: 12231, 
    name: 'Playstation 4 500GB Console', 
    description: 'The Playstation 4 is the next gen console to own. With the best games and online experience.', 
    originalPrice: 399.99, 
    salePrice: 299.99 
    }, 
    { 
    id: 12234, 
    name: 'Galaxy Note 7', 
    description: 'The Note 7 has been fixed and will no longer explode. Get it an amazing price!', 
    originalPrice: 899.99, 
    salePrice: 499.99 
    }, 
    { 
    id: 12245, 
    name: 'Macbook Pro 2016', 
    description: 'The Macbook Pro is the de-facto standard for best in breed mobile computing.', 
    originalPrice: 2199.99, 
    salePrice: 1999.99 
    }, 
    { 
    id: 12267, 
    name: 'Amazon Echo', 
    description: 'Turn your home into a smart home with Amazon Echo. Just say the word and Echo will do it.', 
    originalPrice: 179.99, 
    salePrice: 129.99 
    }, 
    { 
    id: 12288, 
    name: 'Nest Outdoor Camera', 
    description: 'The Nest Outdoor camera records and keeps track of events outside your home 24/7.', 
    originalPrice: 199.99, 
    salePrice: 149.99 
    }, 
    { 
    id: 12290, 
    name: 'GoPro 4', 
    description: 'Record yourself in first person 24/7 with the GoPro 4. Show everyone how exciting your life is.', 
    originalPrice: 299.99, 
    salePrice: 199.99 
    }, 
    ]; 
    res.json(deals); 
}) 

app.get('/api/deals/private', authCheck, (req,res)=>{ 
    let deals = [ 
    { 
    id: 14423, 
    name: 'Tesla S', 
    description: 'Ride in style and say goodbye to paying for gas. The Tesla S is the car of the future.', 
    originalPrice: 90000.00, 
    salePrice: 75000.00 
    }, 
    { 
    id: 14553, 
    name: 'DJI Phantom 4', 
    description: 'The Drone revolution is here. Take to the skies with the DJI Phantom 4.', 
    originalPrice: 1299.99, 
    salePrice: 749.99 
    }, 
    { 
    id: 15900, 
    name: 'iPhone 7 - Jet Black', 
    description: 'Get the latest and greatest iPhone in the limited edition jet black.', 
    originalPrice: 899.99, 
    salePrice: 799.99 
    }, 
    { 
    id: 16000, 
    name: '70" Samsung 4K HDR TV', 
    description: 'Watch as if you were there with the latest innovations including 4K and HDR.', 
    originalPrice: 2999.99, 
    salePrice: 2499.99 
    }, 
    { 
    id: 17423, 
    name: 'Canon t8i DSLR', 
    description: 'Capture life\'s moments with the amazing Canon t8i DSLR', 
    originalPrice: 999.99, 
    salePrice: 549.99 
    }, 
    { 
    id: 17423, 
    name: 'Xbox One S', 
    description: 'Get the latest Xbox and play the best first party games including Gears of War and Forza.', 
    originalPrice: 299.99, 
    salePrice: 279.99 
    }, 
    ]; 
    res.json(deals); 
}) 


app.listen(3001); 
console.log('Listening on localhost:3001'); 

tasks.js

var express = require('express'); 
var router = express.Router(); 
var mongojs = require('mongojs'); 
var db = mongojs('mongodb://mojtaba:123456@ds129038.mlab.com:29038/mytasklist_mojtaba', ['tasks']); 

// Get All Tasks 
router.get('/tasks', function(req, res, next){ 
    db.tasks.find(function(err, tasks){ 
     if(err){ 
      res.send(err); 
     } 
     res.json(tasks); 
    }); 
}); 

module.exports = router; 

角2

任務.component.ts：

個

import { Component } from '@angular/core'; 
    import {TaskService} from './task.service'; 
    import {Task} from '../../Task'; 


    @Component({ 
     selector: 'tasks-component', 
     templateUrl: 'tasks.component.html' 
    }) 

    export class TasksComponent { 
     tasks: Task[]; 
     title: string; 

     constructor(private taskService:TaskService){ 
     this.taskService.getTasks() 
      .subscribe(tasks => { 
      this.tasks = tasks; 
      }); 
     } 

     addTask(event){ 
     event.preventDefault(); 
     var newTask = { 
      title: this.title, 
      isDone: false 
     } 

     this.taskService.addTask(newTask) 
      .subscribe(task => { 
      this.tasks.push(task); 
      this.title = ''; 
      }); 
     } 
    } 
} 

task.service.ts：

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


@Injectable() 
export class TaskService{ 


    constructor(private http:Http){ 
    console.log('Task Service Initialized...'); 
    } 
    /* 
    getTasks(){ 
    console.log('get tasks works'); 
    return this.http.get('/tasks') 
    .map(res => res.json()); 
    } 

    */ 
    getTasks(){ 
    return this.http.get('/tasks') 
     .map(res => res.json()); 
    } 
} 

錯誤

我試圖發送JSON而不是HTML到客戶端，但它不能正常工作。所以我該怎麼做？

Answer 1

變化return this.http.get('/api/tasks'返回this.http.get('http://localhost:3001/tasks')

Answer 2

這是錯誤意味着你的Ajax調用（http.get）正在訪問的HTML頁面，然後你去解析成JSON。

在你的表達中，你有一個/任務路由，但是在你的服務中，你試圖訪問/ api/task，我認爲這不存在。

所以你需要改變express API或者改變你的http.get方法。

因此，要麼：

app.get('/api/tasks', (req, res)=>{ 
    db.tasks.find(function(err, tasks){ 
     if(err){ 
      res.send(err); 
     } 
     res.json(tasks); 
    }); 
}); 

OR：

getTasks(){ 
    console.log('get tasks works'); 
    return this.http.get('/tasks') 
     .map(res => res.json()); 
    } 

在所有情況下，要確保你打正確的API是看你的網絡選項卡，看到的最好方式你打的AJAX呼叫的URL，然後複製粘貼到你的瀏覽器（或更好，郵遞員），看看有什麼反應，

在你的情況，我想你會看到：無法獲取路線api/task，w這是由快遞服務器引發的。

Answer 3

您尚未正確定義您的路線。您已將 所有端點定義爲「/ tasks」和「/ upload」。但是，您正在嘗試使用 訪問「/ api/tasks」。更好的方式使用快遞路線 類（express.Router）或app.route（）方法創建分佈式 路由。

Basic Use: 
//Using app.route() 
app.route('/api/tasks') 
    .get(function (req, res) { 
    res.send('Get a random task') 
    }) 
    .post(function (req, res) { 
    res.send('Add a task') 
    }) 
    .put(function (req, res) { 
    res.send('Update the task') 
    }) 
//Using express.Router 
var express = require('express') 
var router = express.Router() 

// middleware that is specific to this router 
router.use(function timeLog (req, res, next) { 
    console.log('Time: ', Date.now()) 
    next() 
}) 
// define the home page route 
router.get('/', function (req, res) { 
    res.send('Birds home page') 
}) 
// define the about route 
router.get('/about', function (req, res) { 
    res.send('About birds') 
}) 

module.exports = router 

檢查機制的文檔在這裏。 https://expressjs.com/en/guide/routing.html

檢查你的身體解析器implemention.Since中間件適用於pipe.It應該在你的路線之上。 見例如： https://github.com/expressjs/body-parser

var express = require('express') 
var bodyParser = require('body-parser') 

var app = express() 

// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ extended: false })) 

// parse application/json 
app.use(bodyParser.json()) 

app.use(function (req, res) { 
    res.setHeader('Content-Type', 'text/plain') 
    res.write('you posted:\n') 
    res.end(JSON.stringify(req.body, null, 2)) 
})