如何解决 HTTP 错误 200, SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse

Question

谁能帮我解决这个问题？我被困了2天，....我真的不知道如何解决它....我使用angular cli / angular5和expressjs构建了一个网页（包含一个表格）。我使用 mongoose mongodb 作为数据库。在本地一切正常。但是当我上传 dist 文件夹并将其部署到 azure web 应用程序时，它的表是空的。 错误日志如下所示：

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://stringfr.azurewebsites.net/book", ok: false, …}
   error:
   error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse
    HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure during parsing for https://stringfr.azurewebsites.net/book"
    name:"HttpErrorResponse"
    ok:false
    status:200
    statusText:"OK"

这是我的临时网站：“https://stringfr.azurewebsites.net”。您可以通过检查检查完整的错误日志。

我认为这与 book.component.ts 中的这一行有关。 在这里，我从数据库中获取数据并在一个简单的 html 表上使用它。 注意 book_value 只是我获取更多结构化数据的接口。

this.http.get<book_value>('/book').subscribe (
  data => this.books = data
);

这里是我初始化“/book”的地方。 在 app.js 中

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


var book = require('./routes/book');
var app = express();
var mongoose = require('mongoose');
mongoose.Promise = require('bluebird');
//mongoose.connect('put ur own mongodb')
  // .then(() =>  console.log('connection succesful'))
   //.catch((err) => console.error(err));
mongoose.connect('mongodb://localhost/mean-angular5')
  .then(() =>  console.log('connection succesful'))
  .catch((err) => console.error(err));


app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));
app.use(express.static(path.join(__dirname, 'dist')));
app.use('/books', express.static(path.join(__dirname, 'dist')));
app.use('/book', book);

在 ./routes/book.js 中

var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Book = require('../models/Book.js');

/* GET ALL BOOKS */
router.get('/', function(req, res, next) {
  Book.find(function (err, products) {
    if (err) return next(err);
    res.json(products);
    console.log(products);
    console.log("products info above");
    console.log(res);
  });
});

这是我在 ../models/Book.js 中的架构：

var mongoose = require('mongoose');

var BookSchema = new mongoose.Schema({
  timestamp: String,
  question : String,
  answer : String
 });
 module.exports = mongoose.model('Book',BookSchema );

因为我使用的是 dist 文件夹。我使用这个 web.config。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.svg|.eot|.woff|\​.woff2)).*$" />
          <conditions logicalGrouping="MatchAll"></conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>
</configuration>

注意：Azure 日志流上没有显示错误。 这是我的 app.module：

const appRoutes: Routes = [
  {
    path: 'books',
    component: BookComponent,
    data: { title: 'Book List' }
  },
  { path: '',
    redirectTo: '/books',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    BookComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CalendarModule,
    BrowserAnimationsModule,
    FormsModule,
    AccordionModule,
    PanelModule,
    ButtonModule,
    RadioButtonModule,
    DataTableModule,
    MultiSelectModule,
    DropdownModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

免责声明：我从未使用过 Azure。

在我看来，Azure 正在将所有请求重写为 /，并在每条路径上提供 Angular 的 index.html。

这些类型的重写规则通常如何工作：

1. 请求进来
2. Azure 解析请求，并查看是否有任何规则适用。如果是这样，它会根据重定向更改请求 URL。
3. 新编辑的请求 URL 被发送到 Express。
4. Express 以编辑后的请求 URL 的结果进行响应。

在我看来，就像在第 2 步中 Azure 将 /book 重写为 /，然后 /book URL 永远不会命中。

我建议您先尝试删除重写规则，然后查看/book URL 是否发送了正确的 JSON 响应。

如果没有，请检查带有斜杠的/book/ 是否发送正确的响应。如果是，而 /book 不是，添加 a 5-line middleware 以使 Express 认为 /book 和 /book/ 具有相同的含义。

Answer 2

嗯，在 Azure 中，您的应用程序在 Microsoft IIS 上运行，/book 是一个快速路由，它是一个后端 Node.js 应用程序，它应该由 IIS 模块 iisnode 执行。因此，您需要编辑 web.config 文件以将 CGI 处理程序设置为如下内容：

<handlers>
    <!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
    <add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>

并且还添加以下规则来告诉入口点是什么：

<!-- All other URLs are mapped to the node.js site entry point -->
<rule name="DynamicContent">
     <conditions>
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
     </conditions>
     <action type="Rewrite" url="app.js"/>
</rule>

并添加这个来告诉静态内容在哪里：

<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
     <action type="Rewrite" url="public{REQUEST_URI}"/>
</rule>

另见：

• How to define a web.config file for Azure deployment for a MEAN application?

• Using a custom web.config for Node apps

Answer 3

您是否尝试过将https://stringfr.azurewebsites.net/book 粘贴到您的浏览器并查看返回的内容？

如果不是 JSON，那是你的问题。