HTTP錯誤。接收HTML而不是JSON。我如何獲得JSON？

Question

我正在處理MEAN堆棧上的HTTP請求。

當我在本地主機上開發時，所有請求都起作用。

但是，當我嘗試通過生產執行相同的請求時，它們不起作用。

這裏的嘗試後，當我得到的錯誤...

ERROR SyntaxError: Unexpected token < in JSON at position 0 
    at JSON.parse (<anonymous>) 

我也派我的POST請求後得到與得到一個錯誤。

GET http://atozinsurance.herokuapp.com/post 503 (Service Unavailable) 

我知道這意味着我收到的是HTML而不是JSON。我在代碼中做錯了什麼，要求HTML？

下面是帖子

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

var Post = require('../models/post'); 

router.get('/', function(req, res, next) { 
    Post.find() 
    .exec(function(err, posts){ 
     if (err) { 
     return res.status(500).json({ 
      title: 'An error occurred', 
      error: err 
     }); 
     } 
     res.status(200).json({ 
     message: 'Success', 
     obj: posts 
     }); 
    }); 
}); 

// router.use('/', function (req, res, next) { 
// jwt.verify(req.query.token, 'secret', function (err, decoded) { 
//  if (err) { 
//  return res.status(401).json({ 
//   title: 'Not Authenticated', 
//   error: err 
//  }); 
//  } 
//  next(); 
// }) 
// }); 

router.post('/', function (req, res, next) { 
    const post = new Post({ 
    title: req.body.title, 
    content: req.body.content, 
    date: req.body.date 
    }); 
    post.save(function(err, result) { 
    if (err) { 
     return res.status(500).json({ 
     title: 'An error occured', 
     error: err 
     }); 
    } 
    res.status(201).json({ 
     message: 'Post saved', 
     obj: result 
    }); 
    }); 
}); 

router.patch('/:id', function (req, res, next) { 
    Post.findById(req.params.id, function (err, post) { 
    if (err) { 
     return res.status(500).json({ 
     title: 'An error occurred', 
     error: err 
     }); 
    } 
    if (!post) { 
     return res.status(500).json({ 
     title: 'No Post Found!', 
     error: {message: 'Post not found'} 
     }); 
    } 
    post.title = req.body.title; 
    post.content = req.body.content; 
    post.date = req.body.date; 
    post.save(function(err, result) { 
     if (err) { 
     return res.status(500).json({ 
      title: 'An error occurred', 
      error: err 
     }); 
     } 
     res.status(200).json({ 
     message: 'Updated post', 
     obj: result 
     }); 
    }); 
    }); 
}); 

router.delete('/:id', function(req, res, next) { 
    Post.findById(req.params.id, function (err, post) { 
    if (err) { 
     return res.status(500).json({ 
     title: 'An error occurred', 
     error: err 
     }); 
    } 
    if (!post) { 
     return res.status(500).json({ 
     title: 'No Post Found!', 
     error: {post: 'Post not found'} 
     }); 
    } 
    post.remove(function(err, result) { 
     if (err) { 
     return res.status(500).json({ 
      title: 'An error occurred', 
      error: err 
     }); 
     } 
     res.status(200).json({ 
     message: 'Deleted post', 
     obj: result 
     }); 
    }); 
    }); 
}); 



module.exports = router; 

這裏是我的服務，它是通過角發送請求我的路線的NodeJS。

import { Http, Response, Headers } from "@angular/http"; 
import { Injectable, EventEmitter } from "@angular/core"; 
import 'rxjs/Rx'; 
import { Observable } from "rxjs"; 

import { Post } from "./blog.model"; 

@Injectable() 
export class PostService { 
    private posts: Post[] = []; 
    inputEditMessage = new EventEmitter<Post>(); 
    url = 'http://atozinsurance.herokuapp.com/post'; 
    devUrl = 'http://localhost:8080/post/'; 

    constructor(private http: Http) { 
    } 

    addPost(post: Post) { 
    const body = JSON.stringify(post); 
    const headers = new Headers({'Content-Type': 'application/json'}); 
    // const token = localStorage.getItem('token') 
    // ? '?token=' + localStorage.getItem('token') 
    // : ''; 
    return this.http.post(this.url, body, {headers: headers}) 
     .map((response: Response) => { 
     const result = response.json(); 
     const post = new Post(
      result.obj.title, 
      result.obj.content, 
      result.obj.date, 
      result.obj._id); 
     this.posts.push(post); 
     return post; 
     }) 
     .catch((error: Response) => Observable.throw(error.json())); 
    } 

    getPosts() { 
    return this.http.get(this.url) 
     .map((response: Response) => { 
     const posts = response.json().obj; 
     let transformedPosts: Post[] = []; 
     for (let post of posts) { 
      transformedPosts.push(new Post(
      post.title, 
      post.content, 
      post.date, 
      post._id) 
     ); 
     } 
     this.posts = transformedPosts; 
     return transformedPosts; 
     }) 
     .catch((error: Response) => Observable.throw(error.json())); 
    } 

    editPost(post: Post) { 
    this.inputEditMessage.emit(post); 
    } 

    updatePost(post: Post) { 
    const body = JSON.stringify(post); 
    const headers = new Headers({'Content-Type': 'application/json'}); 
    const token = localStorage.getItem('token') 
     ? '?token=' + localStorage.getItem('token') 
     : ''; 
    return this.http.patch(this.url + '/' + post.postId + token, body, {headers: headers}) 
     .map((response: Response) => response.json()) 
     .catch((error: Response) => Observable.throw(error.json())); 
    } 

    deletePost(post: Post) { 
    this.posts.splice(this.posts.indexOf(post), 1); 
    const token = localStorage.getItem('token') 
     ? '?token=' + localStorage.getItem('token') 
     : ''; 
    return this.http.delete(this.url + '/' + post.postId + token) 
     .map((response: Response) => response.json()) 
     .catch((error: Response) => Observable.throw(error.json())); 
    } 
} 

正如我之前所說，與localhost（稱爲devUrl）它工作正常。但是當我切換到url或生產模式時，它失敗了。

任何人都知道錯誤在哪裏？

編輯***這是我收到的HTML錯誤。

<!DOCTYPE html> 
    <html> 
     <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <meta charset="utf-8"> 
     <title>Application Error</title> 
     <style media="screen"> 
      html,body,iframe { 
      margin: 0; 
      padding: 0; 
      } 
      html,body { 
      height: 100%; 
      overflow: hidden; 
      } 
      iframe { 
      width: 100%; 
      height: 100%; 
      border: 0; 
      } 
     </style> 
     </head> 
     <body> 
     <iframe src="//www.herokucdn.com/error-pages/application-error.html"></iframe> 
     </body> 
    </html> 

編輯***

這裏是我的server.js文件

const express = require('express'); 
const path = require('path'); 
const cookieParser = require('cookie-parser'); 
const bodyParser = require("body-parser"); 
const mongoose = require('mongoose'); 

const appRoutes = require('./routes/app'); 
const mailRoutes = require('./routes/mail'); 
const userRoutes = require('./routes/user'); 
const postRoutes = require('./routes/post'); 



const app = express(); 
const uristring = 
    process.env.MONGOLAB_URI || 
    process.env.MONGOHQ_URL || 
    'localhost:27017/atoz'; 

mongoose.connect(uristring, function (err, res) { 
    if (err) { 
    console.log ('ERROR connecting to: ' + uristring + '. ' + err); 
    } else { 
    console.log ('Succeeded connecting to: ' + uristring); 
    } 
}); 

app.set('views', path.join(__dirname, './dist')); 
app.set('view engine', 'ejs'); 

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

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

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'); 
    res.header('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS'); 
    next(); 

}); 

app.use('/user', userRoutes); 
app.use('/post', postRoutes); 
app.use('/mail', mailRoutes); 
app.use('/', appRoutes); 

//catch 404 and forward error handler 
app.use('*', appRoutes); 

app.listen(process.env.PORT || 8080); 

module.exports = app; 

編輯*** 這裏是我從Heroku的接收錯誤日誌

at=error code=H12 desc="Request timeout" method=POST path="/post" host=atozinsurance.herokuapp.com request_id=c4e340d3-8ee3-4c2f-ae12-e56e7439c0f1 fwd="68.111.238.205" dyno=web.1 connect=1ms service=30001ms status=503 bytes=0 protocol=http 
Macs-MacBook-Pro-2:atoz-app joncorrin$ 

Answer 1

對於有此問題的人。您正在從Heroku收到HTML。 HTML中的第一個字符是<，它解釋了爲什麼它肯定不是JSON。

我的解決方案： 我沒有爲MONGOLAB_URL設置我的環境變量。因此，heroku無法正確連接到數據庫，並且請求超時。

將它設置爲MongLab插件並完美工作。