Angular front-end deployed in Azure can't connect to back-end API, the api url is spliced

I have deployed Spring boot backend and Angular frontend website in Azure, when I access the website, for some reason the frontend url is spliced in front of the api url causing me to be unable to access it. My local development environment is all fine.

As shown below, Brower got the wrong API URL https://ambitious-ground-04bd38a0f....-g7guhdcvf2gjgrd6.canadaeast-01.azurewebsites. net/api/product-category

My correct API URL should be https://ecommercespring-g7guhdcvf2gjgrd6.canadaeast-01.azurewebsites.net/api

And I don't think I have a problem with Angular's Cors. Below are my Angular Cors URL setting

Continue reading...