javascript - Angular 2 : EXCEPTION: Unexpected token < in JSON at position 0

Question

我正在尝试在我的 Angular 2 代码中实现 REST API，但我在通过 Angular 从 Express 获取数据时遇到问题

当我删除 Angular 组件时，没有错误，所以很可能是它导致了问题。我还可以通过服务器路由http://localhost:3001/task访问数据，因此数据是通过express接收的

这是我的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');

任务.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;

Angular 2

任务.组件.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 = '';
          });
      }
    }
}

任务.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

此错误意味着您的 ajax 调用 ( http.get ) 正在访问 html 页面，然后您尝试将其解析为 JSON。

在你的express中，你有一个/task 的路线，但在你的服务中，你试图访问/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);
    });
});

或者:

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

在所有情况下，确保您使用正确的 api 的最佳方法是查看您的网络选项卡并查看您通过 AJAX 调用访问的 url，然后将其复制粘贴到您的浏览器中(或者更好， postman )看看有什么回应，

在你的情况下，我想你会看到: Can't get Route api/task ，这是由 Express 服务器抛出的。