Content Delivery API - Missing Accept-Language in Vary header #17953

jdpnielsen · 2024-09-10T10:13:38Z

jdpnielsen
Sep 10, 2024

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

13.4.1

Bug summary

I'm using the Content Delivery API with a multi-language site. When getting content in a specific language i use the Accept-Language header as specified in the documentation. Unfortunately, this can lead to issues with browser caching of content, due to the response being cached and served across any language variation. This happens because the browser does not take request headers into account when determining matching cache entries.

Specifics

Screen recording shows issue with browser caching of requests, using the appended reproduction example:

Screen.Recording.2024-09-10.at.12.02.58.mov

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <script type="module">
    document.getElementById('load-english-content').addEventListener('click', async () => {
      const data = await fetchByLanguage('en-US');

      updateResultDiv('english-content', data);
    });

    document.getElementById('load-danish-content').addEventListener('click', async () => {
      const data = await fetchByLanguage('da-DK');

      updateResultDiv('danish-content', data);
    });

    async function fetchByLanguage(language) {
      const myHeaders = new Headers();
      myHeaders.append("Accept", "application/json");
      myHeaders.append("Accept-Language", language);

      try {
        const response = await fetch('https://localhost:44321/umbraco/delivery/api/v2/content?filter=contentType:eventEntity', {
          method: "GET",
          cache: 'force-cache',
          headers: myHeaders,
          redirect: "follow"
        });

        const result = await response.json();
        return result;
      } catch (error) {
        console.error(error);
        throw error;
      };
    }

    function updateResultDiv(divId, data) {
      const div = document.getElementById(divId);
      div.innerHTML = '';
      const table = div.appendChild(document.createElement('table'));

      table.appendChild(document.createElement('th')).textContent = 'Name';
      table.appendChild(document.createElement('th')).textContent = 'URL';

      data.items.forEach(item => {
        const row = document.createElement('tr');

        const cell1 = row.appendChild(document.createElement('td'));
        cell1.textContent = item.name;
        const cell2 = row.appendChild(document.createElement('td'));
        cell2.textContent = item.url;

        table.appendChild(row);
      });
    }
  </script>
</head>
<body>
  <div>
    <h1>English content</h1>
    <button id="load-english-content">Load content</button>
    <div id="english-content"></div>
  </div>
  <div>
    <h1>Danish content</h1>
    <button id="load-danish-content">Load content</button>
    <div id="danish-content"></div>
  </div>
</body>
</html>

Steps to reproduce

Setup content with language variants
Whitelist frontend Cors origin
Using the reproduction example above:
1. Request one language using Accept-Language header to get content in a specific language.
2. In the same browser session, repeat the request with a different Accept-Language header
Browser cache will return content matching the first request, instead of the second

Expected result / actual result

A standard solution to this is for the server to respond to a request with the Vary header. Unfortunately it seems to be configured to respond with Vary: Accept-Encoding (At least on Umbraco Cloud).

I propose two solutions:

Include Accept-Language, Preview and Start-Item in the Vary header where applicable.
Make all applicable inputs to the content query part of the url. Ie. https://localhost:44321/umbraco/delivery/api/v2/content?filter=contentType:eventEntity&language=da-DK

@jdpnielsen · 2024-09-10T10:13:50Z

github-actions[bot]
bot Sep 10, 2024

Hi there @jdpnielsen!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
We'll replicate the issue to ensure that the problem is as described.
We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

0 replies

jdpnielsen · 2024-09-10T10:17:31Z

jdpnielsen
Sep 10, 2024
Author

Not directly related to this issue is umbraco/Umbraco.Cloud.Issues#815, which also requests improvements to Vary header handling.

0 replies

gogolineq · 2024-10-01T17:37:09Z

gogolineq
Oct 1, 2024

@jdpnielsen did you find solution for this issue? I have the same problem - Accept-Language is not working and content is cached via all cultures.

0 replies

jdpnielsen · 2024-10-02T09:26:11Z

jdpnielsen
Oct 2, 2024
Author

@jdpnielsen did you find solution for this issue? I have the same problem - Accept-Language is not working and content is cached via all cultures.

@gogolineq Yes, actually. If you add a fake query parameter to your request, the browser will correctly match the cache entry. Ie. something like this:

/umbraco/delivery/api/v2/content?filter=contentType:eventEntity&language=da-DK

0 replies

gogolineq · 2024-10-03T06:36:42Z

gogolineq
Oct 3, 2024

@jdpnielsen it's working, thanks!

0 replies

kjac · 2025-01-13T10:10:01Z

kjac
Jan 13, 2025
Maintainer

Hi everyone,

Thank you for this ... and sorry for the belated response.

I think this would be a great addition. But as this is a feature request, I will move this to the discussions for the time being 👍

You can roll your own solution with a piece of middleware. This way you don't have to add additional query parameters to the API calls:

public class AddVaryHeaderMiddleware
{
    private readonly RequestDelegate _next;

    public AddVaryHeaderMiddleware(RequestDelegate next)
        => _next = next;

    public async Task InvokeAsync(HttpContext context)
    {
        // add the Vary headers you need
        context.Response.Headers["Vary"] = "Accept, Accept-Language";
        await _next(context);
    }
}

0 replies

kjac · 2025-01-13T18:43:29Z

kjac
Jan 13, 2025
Maintainer

PR in #17962

0 replies

kjac · 2025-01-14T14:54:33Z

kjac
Jan 14, 2025
Maintainer

Will be included in 13.6 and 15.2 👍

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content Delivery API - Missing Accept-Language in Vary header #17953

{{title}}

Replies: 8 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Content Delivery API - Missing Accept-Language in Vary header #17953

jdpnielsen Sep 10, 2024

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

Bug summary

Specifics

Steps to reproduce

Expected result / actual result

Replies: 8 comments

github-actions[bot] bot Sep 10, 2024

jdpnielsen Sep 10, 2024 Author

gogolineq Oct 1, 2024

jdpnielsen Oct 2, 2024 Author

gogolineq Oct 3, 2024

kjac Jan 13, 2025 Maintainer

kjac Jan 13, 2025 Maintainer

kjac Jan 14, 2025 Maintainer

jdpnielsen
Sep 10, 2024

github-actions[bot]
bot Sep 10, 2024

jdpnielsen
Sep 10, 2024
Author

gogolineq
Oct 1, 2024

jdpnielsen
Oct 2, 2024
Author

gogolineq
Oct 3, 2024

kjac
Jan 13, 2025
Maintainer

kjac
Jan 13, 2025
Maintainer

kjac
Jan 14, 2025
Maintainer