Prevent httpclient from adding server url when calling presigned url

Question

I have a JHipster generated angular frontend. All media related to the app are stored on AWS S3. To fetch or upload media, the client side asks the backend for a presigned url. Afterwards, it should use that presigned url to retrieve the media.

Problem is, that the http request get's manipulated in some way that it always adds the gateway host domain in front of the presigned url.

Function which should upload media to s3:

    private save(presignedUri: string, file: File): Observable<HttpEvent<any>> {
        const formData: FormData = new FormData();
        formData.append('file', file);

        const headers = new HttpHeaders()
            .set('Content-Type', `${file.type}; charset=utf-8`);

        const req = new HttpRequest('POST', presignedUri, formData, {
            reportProgress: true,
            responseType: 'text',
            headers
        });

        return this.http.request(req);
    }

I expect that it just use the given presigned url, instead it tries to request with http://localhost:9001/%22https://s3.eu-central-1.amazonaws.com/19fa8b4d-av…gnature=6c96de...

Answer 1

The URL you are navigating to starts with a " (visible as %22 in the URL), which causes the request to append the URL to the existing URL instead of requesting it directly. If the URL starts with http://, https://, or // it will work correctly.