Https://dt-api.dev.atl-paas.net/items not working while fetching embedded video assets in from Confluence page using @atlaskit/renderer

Hi,

The following api call to fetch asset is failing with preflight request error while fetching video from a confluence page on my web app.

The video is originally embedded in a confluence page in the following manner.

On my site, using ReactRenderer it fails to load and looks like this:

https://dt-api.dev.atl-paas.net/items call fails and the video is not loaded on my app using @atlaskit/renderer.

Here is my code to achieve the same:

import React from "react";
import { ReactRenderer } from "@atlaskit/renderer";
import { Provider as SmartCardProvider, Client } from "@atlaskit/smart-card";
import { ProviderFactory } from "@atlaskit/editor-common";
import {
  storyMediaProviderFactory,
  storyContextIdentifierProviderFactory,
} from "@atlaskit/editor-test-helpers";
import {
  defaultCollectionName
} from "@atlaskit/media-test-helpers";
import "./Document.css";

function Document({ title, content }) {
  const extensionHandlers = {
    "com.atlassian.confluence.macro.core": (ext) => {
      const { extensionKey } = ext;
      console.log("ext: ", ext);
      switch (extensionKey) {
        case "anchor":
          return (
            <span id={`${ext.parameters.macroParams[""].value}`}>{""}</span>
          );
        default:
          return null;
      }
    },
  };
  // const mediaProvider = createStorybookMediaClientConfig({ authType: 'asap'});
  const mediaProvider = storyMediaProviderFactory({
    useMediaPickerAuthProvider: false
  });
  const providerFactory = ProviderFactory.create({
    mediaProvider
  });
  return (
    <React.Fragment>
      <h2 className="documentTitle">{title}</h2>
      <SmartCardProvider client={new Client()}>
        <ReactRenderer
          document={content}
          dataProviders={providerFactory}
          extensionHandlers={extensionHandlers}
          allowHeadingAnchorLinks
          shouldOpenMediaViewer
          appearance="full-page"
          eventHandlers={{
            smartCard: {
              onClick: (e, url) => {
                window.open(url, "_blank");
              },
            },
          }}
          defaultCollectionName={defaultCollectionName}
          media={{
            featureFlags: {
              newCardExperience: true,
              mediaInline: true,
            },
          }}
        />
      </SmartCardProvider>
    </React.Fragment>
  );
}

export default Document;

Error:


Any help on this would be highly appreciated!

Thanks!
Dan