解析 https:// 期间的 Http 失败答案

【问题标题】：Http failure during parsing for https://解析 https:// 期间的 Http 失败
【发布时间】：2019-04-26 17:00:52
【问题描述】：

我正在使用 Angular 2。我在前端有一个组件，它使用 HttpClient 调用在后端获取我的函数。我在本地主机上的代码在运行“node server.js”和“ng serve”时运行良好，但是当我把它放在firebase上（使用“ng build --prod”和“firebase deploy”）时，它在加载页面时给了我这个错误：

{
error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.l
headers: t {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for https://my-project-name.firebaseapp.com/test"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
}

我已尝试按照该答案Angular HttpClient "Http failure during parsing" 中的建议强制响应类型，但它给了我一个编译错误，即响应是 json 而不是文本。

这就是我在本地主机上工作的代码：

//file .ts
import { HttpClient } from '@angular/common/http';
...
...
constructor(private http: HttpClient){}
ngOnInit() {
    this.http.get<{}>('http://localhost:8080/test').subscribe(res => {
      console.log(res);
    });
...
...

//file server.js
//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + 'localhost:4200'));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, PATCH, PUT, DELETE, OPTIONS'
  );
  next();
});

app.route('/test').get((req, res) => {
  res.send({
    cats: [{
      name: 'lilly'
    }, {
      name: 'lucy'
    }],
  })
});

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname + 'localhost:4200'));
});

app.listen(process.env.PORT || 8080, () => {
  console.log('online');
});

那是我的代码在 firebase 上不起作用

//file .ts
import { HttpClient } from '@angular/common/http';
...
...
constructor(private http: HttpClient){}
  ngOnInit() {
    this.http
      .get<{}>('https://my-project-name.firebaseapp.com/test')
      .subscribe(res => {
        console.log(res);
      });
...
...

//server.js
//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/browser'));

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  );
  res.setHeader(
    'Access-Control-Allow-Methods',
    'GET, POST, PATCH, PUT, DELETE, OPTIONS'
  );
  next();
});

app.route('/test').get((req, res) => {
  res.send({
    cats: [{
      name: 'lilly'
    }, {
      name: 'lucy'
    }],
  })
})

app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname + '/dist/browser/index.html'));
});

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

【问题讨论】：

尝试将 resposeType 设为responseType: 'text' as 'json'
URL ecommerce-518a4.firebaseapp.com/test 返回您的根 HTML 页面。它不会像您认为的那样返回 JSON。为什么你认为它应该返回 JSON，因为你不再有任何生成 JSON 的服务器？
我不小心忘记隐藏链接了，你能编辑一下你的评论吗？
在 localhost 上它工作正常，我应该怎么做才能让它在 firebase 上工作？
阅读 Firebase 的文档以了解它是什么。它不是快速托管服务提供商。

标签： node.js angular firebase

【解决方案1】：

显然，firebase 不支持我的代码模式（快速服务器端）。我部署在 heroku 上（我更改了代码上的链接），它可以工作。谢谢你的帮助。如果有人发现如何在 firebase 免费计划中使用该模式，请随时给我建议。

【讨论】：