AWS cloutfront routing issue when including params

I have a frontend APP and a backend app.

I access my frontend via mydomain.com and this all works.

For my backend I access my endpoint(lambdas) via mydomain.com/API.

This works for the most part for urls like:

mydomain.com/API/upload(POST)

mydomain.com/API/HelloWorld(GET)

mydomain.com/API/HelloWorld(GET)

mydomain.com/API/ImageData(GET)

But when I add params like:

mydomain.com/API/media/someNameOfSomething --- this never hits the backend but remains on my frontend site.

My distrubation is setup:

Myserverless for this function:

  media:
    handler: build/handler.handler
    events:
      - http:
          path: api/media/{imageName}
          method: get
          cors: true

I dont have anything in frontend that catches this route but for some reason it is not forwarded to the backend at all and lands on the frontend.

I have also tried navigating to the invoke url and it works as expceted.

What am I doing wrong?

This took me a while to figure out.

I had an issue earlier where lets say you are on your webb app and you are using react router. when switching links to lets say mydomain/x react router would swittch the pages.

BUT if i would paste the url in a new browser mydomain/x

This would give me a 404 from the cloudfront. To handle this I setup a custom error page in my disttribution so that when it gets a 404 that it should navigate it to my frontend routing. In this case my backend responded with a 404 since mydomain/media/hello returns a 404 since i dont have a file called "hello" but this got caught my the error pages.

I did a workarround and return a 500 to test and the error is no longer there.