Q:

'Access-Control-Allow-Origin' on localhost

I am using Angular for frontend and Symfony for backend.
This is how I try to get data from backend:
getTechnologies(): Observable<Itechnologies[]> {
  return this.http.get<Itechnologies[]>('http://localhost/technologies');
}

This is how try to send data from backend:
public function getTechnologies(Request $request) {
    $technologies = $this->technologyService->getTechnologies($request->getContent());
    return new Response(json_encode($technologies));
}

This is what I get:

Access to XMLHttpRequest at 'http://localhost/technologies' from
  origin 'http://localhost:4200' has been blocked by CORS policy: No
  'Access-Control-Allow-Origin' header is present on the requested
  resource.

I also tried it with header('Access-Control-Allow-Origin: *'); but I get the same error.
Why do I get this error if they are both on localhost?

A:

The port is part of the origin that is why CORS is detected here. To deal with this for local development you have two options:

Use a browser plugin that sets a CORS header (please only use for local dev setup).
Use a local proxy that delivers both (frontend and backend) on the same port (see here).

Of course you could also set CORS response headers by your application, but the required values will differ for development and production. Also note that 'Access-Control-Allow-Origin: *' should never be used in production as it basically disables CORS protection. Note that you have to handle the mandatory OPTIONS requests for requests that may change the servers state (as POST,PUT,DELETE and so on) if you deal with CORS.

