[Fixed] How can i remove port from url to make source for images from xampp database to work properly?

Issue

I’m new to angular and i have a problem with angular and xampp. I’m trying to load images from mySQL database where i stored their destination. Problem is that angular tries to access that destination through this:

My HTML is:

But my url to that image is without port :4200

When i access localhost/bcPraca/php/upload/imageName then that image shows up so it works.

So how can i remove that port from Url. Or what can i do to make it work ?

Everything else is working properly except that source in the image.

Solution

You have to use a proxy in order to be able to communicate with your backend/
In order to use a proxy:

1. Create a proxy.conf.json in the root of your workspace (adapt the following to our needs):

   {
   "/api": {
   "target": "http://localhost/api",
   "secure": false,
   "changeOrigin": true
   "logLevel": "debug"
   }
   }

2. Start your app with the following command:

   ng serve –proxy-config proxy.conf.json

You can read more about angular proxy here