Image serving returns 406 (Not Acceptable) when requested from img markup

Question

I'm trying to fetch images from Symfony.

/**
 * @Route("/provide/image/{filename}")
 */
public function provideImage($filename)
{
  $path = 'myimgdir/' . $filename;
  $response = new BinaryFileResponse($path);
  return $response;
}

When I call this endpoint from the webbrowser itself, the target image is served properly. However, when I set this very URL as the 'src' attribute of an img markup (Angular 13 application), the request fails with 406.

Fetched from the browser

Request headers

Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cookie: SESSION=xxx
Host: xxx
Referer: xxx
sec-ch-ua: "Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Response headers

accept-ranges: bytes
Access-Control-Allow-Origin: *
cache-control: max-age=0, must-revalidate, private
connection: close
content-length: 4030
content-type: image/jpeg
date: Thu, 12 Jan 2023 18:12:24 GMT
expires: Thu, 12 Jan 2023 18:12:24 GMT
last-modified: Thu, 12 Jan 2023 18:09:56 GMT
server: nginx/1.23.3
x-powered-by: PHP/7.2.34

Fetched from the img markup

Request headers

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Cookie: SESSION=xxx
Host: xxx
If-Modified-Since: Thu, 12 Jan 2023 18:09:56 GMT
sec-ch-ua: "Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Response headers

Access-Control-Allow-Origin: *
cache-control: max-age=0, must-revalidate, private
connection: close
content-type: text/html; charset=UTF-8
date: Thu, 12 Jan 2023 18:12:34 GMT
expires: Thu, 12 Jan 2023 18:12:34 GMT
server: nginx/1.23.3
transfer-encoding: chunked
x-powered-by: PHP/7.2.34

Why is this, and how can I make it work from my ?

Note: this project still runs on Symfony 3.4

Answer 1

Most likely a CORS issue - You can add following headers to your Symfony controller action:

$response->headers->set('Access-Control-Allow-Origin', '*');
$response->headers->set('Access-Control-Allow-Methods', 'GET');