Code Tweaks CORS policy: No 'Access-Control-Allow-Origin

[proxybunker]

Access to fetch at 'https://cdn.your-website.com/uploads/image.jpeg' from origin 'https://your-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If you're seeing this message within your developer tools (F12) and you no longer have access to crop, cover photos, or profile images, this code should help.

After you have made these modifications, you will need to clear your browser cache, Cloudflare cache, service worker, and any other cache you have on your website, including templates_compiled.

All line numbers are approximations depending on any customisations you have made to your code.
Also, all modifications assume that you are using the default theme.

/content/themes/default/templates/_js_templates.tpl

Line 1812 — <img id="cropped-profile-picture">

  Before:
  <img id="cropped-profile-picture" src="{literal}{{image}}{/literal}" style="max-width: 100%;">

  After:
  <img id="cropped-profile-picture" crossorigin="anonymous" src="{literal}{{image}}{/literal}" style="max-width: 100%;">

/content/themes/default/templates/_js_templates.tpl

  Before:
  <img id="cropped-profile-cover" src="{literal}{{image}}{/literal}" style="max-width: 100%;">

  After:
  <img id="cropped-profile-cover" crossorigin="anonymous" src="{literal}{{image}}{/literal}" style="max-width: 100%;">

This code must go in your Cloudflare R2 dashboard. Click on your bucket name,
then go to settings. then CORS Policy and add it in there.

[
  {
    "AllowedOrigins": [
      "https://your-website.com"
    ],
    "AllowedMethods": [
      "GET",
      "HEAD"
    ],
    "AllowedHeaders": [
      "*"
    ],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Range"
    ],
    "MaxAgeSeconds": 3600
  }
]

Fix: make the service worker bypass cross-origin requests
so the browser handles them natively. Replace the fetch event listener in

public_html/sw.js (lines 13–27).

  Before:

  // Fetch event
  self.addEventListener("fetch", (event) => {
    if (event.request.method !== "GET") {
      return;
    }
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return new Response("Network error occurred", {
            status: 408,
            statusText: "Network error",
          });
        })
    );
  });

  After:

  // Fetch event
  self.addEventListener("fetch", (event) => {
    if (event.request.method !== "GET") {
      return;
    }
    // Let the browser handle cross-origin requests directly (CDN/S3 uploads,
    // fonts, third-party scripts). Re-fetching them through the SW forces a
    // CORS-mode request and breaks images loaded with crossorigin="anonymous".
    const url = new URL(event.request.url);
    if (url.origin !== self.location.origin) {
      return;
    }
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          return new Response("Network error occurred", {
            status: 408,
            statusText: "Network error",
          });
        })
    );
  });