fetch HTTP Error Response with Proxy: parsing error | Angular Community | Page 1

hasty holly Nov 20, 2024, 8:25 PM

#

I just updated Angular from v18 to v19.
I got this error during fetch with Proxy. The backend endpoint is working with Postman.

How could I solve this?

Repo
https://github.com/krondorl/mtgbase

Frontend endpoint:
http://localhost:4200/card/1

Backend endpoint:
http://localhost:8080/api/card?id=1

Proxy conf:

 {
  "/api/cards": {
    "target": "http://localhost:8080/",
    "secure": false
  },
  "/api/cards/*": {
    "target": "http://localhost:8080/",
    "secure": false
  },
  "/api/card/*": {
    "target": "http://localhost:8080/",
    "secure": false
  },
  "/api/artists": {
    "target": "http://localhost:8080/",
    "secure": false
  }
}

SyntaxError: Unexpected token '<', "<!--
  * M"... is not valid JSON
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.onLoad (http://localhost:4200/@fs/F:/Dev/mtgbase/frontend/.angular/cache/19.0.0/mtgbase-frontend/vite/deps/chunk-HRS2PV5Z.js?v=d5e5e7e7:1753:41)
    at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:327:171)
    at http://localhost:4200/@fs/F:/Dev/mtgbase/frontend/.angular/cache/19.0.0/mtgbase-frontend/vite/deps/chunk-ISXW4YOB.js?v=d5e5e7e7:5390:49
    at AsyncStackTaggingZoneSpec.onInvokeTask (http://localhost:4200/@fs/F:/Dev/mtgbase/frontend/.angular/cache/19.0.0/mtgbase-frontend/vite/deps/chunk-ISXW4YOB.js?v=d5e5e7e7:5390:30)
    at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:327:54)
    at Object.onInvokeTask (http://localhost:4200/@fs/F:/Dev/mtgbase/frontend/.angular/cache/19.0.0/mtgbase-frontend/vite/deps/chunk-ISXW4YOB.js?v=d5e5e7e7:5599:25)
    at _ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:327:54)
    at ZoneImpl.runTask (http://localhost:4200/polyfills.js:135:37)
    at ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:398:26)

GitHub

GitHub - krondorl/mtgbase: Full stack card game database with Sprin...

Full stack card game database with Spring Boot and Angular - krondorl/mtgbase

sharp solstice Nov 20, 2024, 8:52 PM

#

What is the response being sent by the backend (in the network panel of your dev tools)? It looks like it's HTML and not JSON.

strange rampart Nov 20, 2024, 9:56 PM

#

I've seen this one many times when the response doesn't contain valid JSON, but is possibly some HTML error or empty response. Make sure the response is JSON and that you have set the correct accept headers.

hasty holly Nov 21, 2024, 9:44 PM

#

@sharp solstice @strange rampart
This is what I got from the backend, it is JSON with Postman:
GET request
http://localhost:8080/api/card?id=1

{
    "id": 1,
    "name": "Kozilek, Butcher of Truth",
    "imageName": "kozilek.jpg",
    "manaCost": "10",
    "typeLine": "Legendary Creature â€” Eldrazi",
    "description": "When you cast this spell, draw four cards. Annihilator 4 (Whenever this creature attacks, defending player sacrifices four permanents.) When Kozilek, Butcher of Truth is put into a graveyard from anywhere, its owner shuffles their graveyard into their library.",
    "flavour": "",
    "stats": "12/12",
    "artist": "Michael Komarck",
    "setName": "Double Masters",
    "setCode": "2X2",
    "serialNumber": 2,
    "rarity": "Mythic Rare",
    "legality": []
    ],
    "rules": []
}

This is what the frontend produces when fetching
http://localhost:4200/card/1

"Http failure during parsing for http://localhost:4200/api/card?id=1"

#

Other pages are fetching correctly from the backend.

#

Everything is sent with JSON.

sharp solstice Nov 21, 2024, 9:46 PM

#

I'm not asking you what you get with postman. I'm asking you what you get in the browser, in the network panel of the dev tools.

hasty holly Nov 21, 2024, 9:47 PM

#

This is the fetch response on frontend

<!--
  * Mtgbase
  *
  * Copyright (c) 2023 Adam Burucs
  *
  * MIT Licensed
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="/@vite/client"></script>

    <meta charset="utf-8"/>
    <title>MtgbaseFrontend</title>
    <base href="/"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
  <link rel="stylesheet" href="styles.css"></head>
  <body>
    <app-root></app-root>
  <script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

#

But I did not sent that from backend

#

It sends JSON

#

Other pages are getting JSON correctly

sharp solstice Nov 21, 2024, 9:50 PM

#

So that means that ng serve is returning the index.html page instead of proxying the request to the backend.

hasty holly Nov 21, 2024, 9:51 PM

#

sharp solstice So that means that ng serve is returning the index.html page instead of proxying...

And how can I fix that? Other subpages are fetching correctly the JSON from BE

#

Maybe the proxy conf is wrong?

sharp solstice Nov 21, 2024, 9:52 PM

#

The proxy config doesn't have anything for your url

hasty holly Nov 21, 2024, 9:52 PM

#

sharp solstice The proxy config doesn't have anything for your url

The proxy config has this one as well

"/api/card/*": {
    "target": "http://localhost:8080/",
    "secure": false
  },```

#

Is this wrong?

sharp solstice Nov 21, 2024, 9:53 PM

#

But your url is /api/card?id=1

hasty holly Nov 21, 2024, 9:54 PM

#

I know, but what could be the regex pattern for the proxy setting?

#

I havent seen other than *

sharp solstice Nov 21, 2024, 9:54 PM

#

So there is no '/' after card

hasty holly Nov 21, 2024, 9:54 PM

#

I see

#

"/api/card?id=*": {

#

should be this one?

sharp solstice Nov 21, 2024, 9:55 PM

#

/api/card should be sufficient

#fetch HTTP Error Response with Proxy: parsing error