Storybook artifact makes CORS request and fails to load icons

Build Environment
1

Hey there!

I’m generating a storybook artifact in circleci and it is mostly working but I’m getting a CORS error because the iframe in the story which is loaded on https://output.circle-artifacts.com is making a request to an S3 domain: https://circleci-tasks-prod.s3.us-east-1.amazonaws.com where the static assets seem to be stored.

Locally, I have set up my static directories and reference them with relative paths. This means that everything works both when I run storybook dev -p 6006 and also when I build a static storybook that is available at a subpath from my local webserver.

These are my css files and fonts inside preview-head.html that are loading fine in circleci:

<!-- Pull in static files served from your Static directory or the internet -->
<!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
<link rel="stylesheet" href="./theme1/css/style.css" />
<link rel="stylesheet" href="./theme2/css/style.css" />
<link rel="stylesheet" href="./theme3/css/style.css" />
<link rel="stylesheet" href="./theme4/css/style.css" />

<link rel="preload" href="./theme1/font/Sans-Bold.woff" />
<link rel="preload" href="./theme1/font/Sans-Bold.woff2" />
<link rel="preload" href="./theme1/font/Sans-Light.woff" />
<link rel="preload" href="./theme1/font/Sans-Light.woff2" />
<link rel="preload" href="./theme1/font/Sans-Regular.woff" />
<link rel="preload" href="./theme1/font/Sans-Regular.woff2" />

I then have an Icons.jsx file that loads the icons from theme1/images/icons.svg

import React from "react";
import PropTypes from "prop-types";

const Icon = ({ icon = "", title = null }) => {
const iconName = icon === "" ? "icon-filters" : icon;

return (
<svg
viewBox="0 0 20 20"
className={`icon icon__product-list-filter icon__wrapper icon-${iconName}`}
>
{title && <title>{title}</title>}
<use xlinkHref={`${drupalSettings.foobar.icons_path}#${iconName}`} />
</svg>
);
};

Icon.propTypes = {
icon: PropTypes.string.isRequired,
title: PropTypes.string,
};

export default Icon;

icons_path is defined as such:

window.drupalSettings = Object.assign(window.drupalSettings || {}, {
path: {
currentLanguage: "en-AU"
},
foobar: {
icons_path: "./theme1/images/icons.svg",
}
});

Is there a way to allow CORS request from the storybook artifact to the CDN from javascript or another way to make this work?