使用 ngrok 解析 Angular 时出现 Http 失败

Question

我正在构建一个应用程序来跟踪股票市场聚会期间饮料的定价。通过 Chrome 使用 localhost 进行测试时一切都很顺利，但我现在尝试通过

NestJS

为

Angular

后端和

ngrok

前端进行端口转发。

我已将问题范围缩小到

Angular

前端，因为我的请求没有进入

ngrok

。

在前端，

DrinksService

从后端请求所有饮料

export class DrinksService {
  constructor(private http: HttpClient, private localService: LocalService) { }

  private url: string = 'https://7a4c-81-241-237-61.ngrok-free.app/drinks'//'http://localhost:3000/drinks';
  drinks: Drink[] = [];

  getDrinks(): Observable<Drink[]> {
    console.log('Getting drinks from backend');
    return this.http.get<Drink[]>(this.url);
  }

  getDrink(name: string): Observable<Drink> {
    console.log('Getting drink: ' + name)
    return this.http.get<Drink>(this.url + '/' + name)
  }

  getDrinksByGroup(): Observable<{alcohols: Drink[], notAlcohols: Drink[] }> {
    return this.getDrinks().pipe(map(drinks => {
      const alcoholDrinks: Drink[] = [];
      const notAlcoholDrinks: Drink[] = [];

      drinks.forEach(drink => {
        if(drink.alcohol) {
          let localAlcohols: Drink[] = JSON.parse(this.localService.getData('alcohols'));
          if(localAlcohols.length !== 0 && localAlcohols.length !== undefined) {
            let localAlcohol: Drink = localAlcohols.find((localAlcohol) => {
              return drink.name === localAlcohol.name;
            }) || drink;
            drink.numberInOrder = localAlcohol.numberInOrder;
            alcoholDrinks.push(drink);
          } else {
            alcoholDrinks.push(drink)
          }
        } else {
          let localNonAlcohols: Drink[] = JSON.parse(this.localService.getData('nonAlcohols'));
          if(localNonAlcohols.length !== 0 && localNonAlcohols.length !== undefined) {
            let localNonAlcohol: Drink = localNonAlcohols.find((localNonAlcohol) => {
              return drink.name === localNonAlcohol.name;
            }) || drink;
            drink.numberInOrder = localNonAlcohol.numberInOrder;
            notAlcoholDrinks.push(drink)
          } else {
            notAlcoholDrinks.push(drink)
          }
        }
      });
      return { alcohols: alcoholDrinks, notAlcohols: notAlcoholDrinks };
    }));
  }
.
.
.
}

我可以毫无问题地在浏览器或 Postman 中访问该 url，并获得正确的 JSON 响应（如下）。

[{"name":"Pintje","alcohol":true,"startPrice":1.8,"minPrice":1.1,"maxPrice":5,"numberInOrder":0,"currentPrice":1.8,"numberSold":0,"soldOut":false,"beurscrash":{"active":false}}]

当尝试运行

getDrinks()

方法时，它给了我一个 Http 错误，只有当我将其更改为访问

ngrok

而不是

localhost

时才会发生这种情况。我不太明白为什么这不起作用。

HttpErrorResponse
error
: 
error
: 
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) at XMLHttpRequest.onLoad (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:40970:39) at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:171) at https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65262:49 at AsyncStackTaggingZoneSpec.onInvokeTask (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65262:30) at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:54) at Object.onInvokeTask (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65564:25) at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:54) at Zone.runTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7405:37) at ZoneTask.invokeTask [as invoke] (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7680:26)
message
: 
"Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON"
stack
: 
"SyntaxError: Unexpected token '<', \"<!DOCTYPE \"... is not valid JSON\n    at JSON.parse (<anonymous>)\n    at XMLHttpRequest.onLoad (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:40970:39)\n    at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:171)\n    at https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65262:49\n    at AsyncStackTaggingZoneSpec.onInvokeTask (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65262:30)\n    at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:54)\n    at Object.onInvokeTask (https://fb36-81-241-237-61.ngrok-free.app/vendor.js:65564:25)\n    at _ZoneDelegate.invokeTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7603:54)\n    at Zone.runTask (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7405:37)\n    at ZoneTask.invokeTask [as invoke] (https://fb36-81-241-237-61.ngrok-free.app/polyfills.js:7680:26)"
[[Prototype]]
: 
Error
constructor
: 
ƒ SyntaxError()
message
: 
""
name
: 
"SyntaxError"
[[Prototype]]
: 
Object
text
: 
"<!DOCTYPE html>\n<html class=\"h-full\" lang=\"en-US\" dir=\"ltr\">\n  <head>\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Regular-WebS.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Medium-WebS.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-Semibold-WebS.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-Text.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <link rel=\"preload\" href=\"https://cdn.ngrok.com/static/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\" as=\"font\" type=\"font/woff\" crossorigin=\"anonymous\" />\n    <meta charset=\"utf-8\">\n    <meta name=\"author\" content=\"ngrok\">\n    <meta name=\"description\" content=\"ngrok is the fastest way to put anything on the internet with a single command.\">\n    <meta name=\"robots\" content=\"noindex, nofollow\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link id=\"style\" rel=\"stylesheet\" href=\"https://cdn.ngrok.com/static/css/error.css\">\n    <noscript>You are about to visit 7a4c-81-241-237-61.ngrok-free.app, served by 81.241.237.61. This website is served for free through ngrok.com. You should only visit this website if you trust whoever sent the link to you. (ERR_NGROK_6024)</noscript>\n    <script id=\"script\" src=\"https://cdn.ngrok.com/static/js/error.js\" type=\"text/javascript\"></script>\n  </head>\n  <body class=\"h-full\" id=\"ngrok\">\n    <div id=\"root\" data-payload=\"eyJjZG5CYXNlIjoiaHR0cHM6Ly9jZG4ubmdyb2suY29tLyIsImNvZGUiOiI2MDI0IiwiaG9zdHBvcnQiOiI3YTRjLTgxLTI0MS0yMzctNjEubmdyb2stZnJlZS5hcHAiLCJtZXNzYWdlIjoiWW91IGFyZSBhYm91dCB0byB2aXNpdCA3YTRjLTgxLTI0MS0yMzctNjEubmdyb2stZnJlZS5hcHAsIHNlcnZlZCBieSA4MS4yNDEuMjM3LjYxLiBUaGlzIHdlYnNpdGUgaXMgc2VydmVkIGZvciBmcmVlIHRocm91Z2ggbmdyb2suY29tLiBZb3Ugc2hvdWxkIG9ubHkgdmlzaXQgdGhpcyB3ZWJzaXRlIGlmIHlvdSB0cnVzdCB3aG9ldmVyIHNlbnQgdGhlIGxpbmsgdG8geW91LiIsInNlcnZpbmdJUCI6IjgxLjI0MS4yMzcuNjEiLCJ0aXRsZSI6Ik9LIn0=\"></div>\n  </body>\n</html>\n"
[[Prototype]]
: 
Object
headers
: 
HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
: 
"Http failure during parsing for https://7a4c-81-241-237-61.ngrok-free.app/drinks"
name
: 
"HttpErrorResponse"
ok
: 
false
status
: 
200
statusText
: 
"OK"
url
: 
"https://7a4c-81-241-237-61.ngrok-free.app/drinks"
[[Prototype]]
: 
HttpResponseBase

为了完整起见，后端调用如下所示

NestJS

@Controller('drinks')
export class DrinksController {
    constructor(private drinksService: DrinksService, private salesHistoryService: SalesHistoryService) {}
    private readonly logger = new Logger(DrinksController.name);



    @Get()
    async getDrinks(@Res() res: Response) {
        this.logger.log("GET: getDrinks()")
        res.set('Access-Control-Allow-Origin', '*');
        res.set
        res.send(this.drinksService.getAllDrinks());
    }
.
.
.
}

Answer 1

您收到的响应包含一条警告，代码为

ERR_NGROK_6024

，可以通过添加

ngrok-skip-browser-warning

标头来解决 来源：ngrok 添加了有关使用免费帐户的新插页式页面警告 (ERR_NGROK_6024)

res.set('ngrok-skip-browser-warning', 'true');