How to proxy image with http-proxy-middleware?

[kopax-polyconseil]

Description

We are proxying a whole SPA website using Node.jS with http-proxy-middleware in order to edit <meta /> tag for social network on two specific routes.

Probleme

Using Google Chrome, this is a .png file retrieved without using the proxy : https://app.staging.passculture.team/images/app-icon-512px.png

This is the same .png file with the proxy : https://app.testing.passculture.team/images/app-icon-512px.png

We expect the MIME content type to be set like with the first URL in our proxy, instead it use res['content-type'] = 'text/html'

It results in Google chrome displaying this :

�PNG  IHDR�x���iCCPICC profile(�}�;H�P���JEZ� â¡:Y��8j�P!� �:���!4iHR\ׂ��Ū������ �qquRt��M -b�p����Ϲ�B��4�c�t�L'b6�"�^B/"Tc2��YIJ�w}�#���8���犨y��x��M�N<�i�����$����#&

The proxy should behave like in the first example link.

By reading the documentation of http-proxy-middleware, I don't find how to serve images without issue.

Reproduction

git clone --depth 1 https://github.com/pass-culture/pass-culture-app-native.git -b bar
cd server
yarn
yarn dev
// then it's listening on http://localhost:8080

Open with chrome http://localhost:8080/images/app-icon-512px.png

Question

How can I fix the proxy ?

[chimurai]

Did you try the responseInterceptor?

Here is an example with image manipulation:
https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/response-interceptor.md#manipulate-image-response