diff --git a/.changeset/wild-pigs-work.md b/.changeset/wild-pigs-work.md
new file mode 100644
index 0000000000..462b3b7233
--- /dev/null
+++ b/.changeset/wild-pigs-work.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-api-docs': patch
+---
+
+Updated the rendering of AsyncApi definitions to be able to resolve absolute HTTP $ref references.
diff --git a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
index 3f9375921d..fd8948828c 100644
--- a/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
+++ b/plugins/api-docs/src/components/AsyncApiDefinitionWidget/AsyncApiDefinition.tsx
@@ -142,6 +142,21 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
   },
 }));
 
+const fetchResolver = {
+  order: 199, // Use 199 as the built-in http resolver is 200
+  canRead: /^https?:\/\//,
+  async read(file: any) {
+    const response = await fetch(file.url);
+    return response.text();
+  },
+};
+
+const config = {
+  parserOptions: {
+    resolve: { fetch: fetchResolver },
+  },
+};
+
 type Props = {
   definition: string;
 };
@@ -155,7 +170,7 @@ export const AsyncApiDefinition = ({ definition }: Props): JSX.Element => {
 
   return (
     <div className={classNames}>
-      <AsyncApi schema={definition} />
+      <AsyncApi schema={definition} config={config} />
     </div>
   );
 };