I am trying to retrieve background images via a REST API.

However, to do so, I need to authorize.

The token is available from the context where the background-image is supposed to be loaded but I have no idea how to add it to the request.

Any ideas? Is this possible at all?

In another approach I used my webserver to add authorization to all requests from within a certain context. This worked fine but is not possible anymore.

I am trying to retrieve background images via a REST API.

However, to do so, I need to authorize.

The token is available from the context where the background-image is supposed to be loaded but I have no idea how to add it to the request.

Any ideas? Is this possible at all?

In another approach I used my webserver to add authorization to all requests from within a certain context. This worked fine but is not possible anymore.

• javascript
• http
• reactjs
• authorization

• You can simply pass the token in request header. – Piotr Sołtysiak Commented Dec 7, 2016 at 9:41
• 1 @PiotrSołtysiak, I don't understand how. I am using background-image: url("/service/1234"); – Moritz Schmitz v. Hülst Commented Dec 7, 2016 at 11:24

1 Answer 1

One way would be to request the images via Javascript, set the correct headers and then display the images as an object URL/blob. Here's an example:

fetch('https://i.imgur./PLKabDV.png', { headers: {
    "Content-Type": "application/json" // this header is just an example, put your token here
  } })
  .then(response => response.blob())
  .then(blob => {
    let img = document.getElementById('image');
    let url = URL.createObjectURL(blob);
    img.style.backgroundImage = `url(${url})`;
  })

<div id="image" style="width: 430px; height: 430px;"></div>