Only apply metadata manifest credentials for preview deployment

packages/next/src/lib/metadata/generate/basic.tsx

@@ -8,6 +8,7 @@ import type { ViewportLayout } from '../types/extra-types'
 import React from 'react'
 import { Meta, MetaFilter, MultiMeta } from './meta'
 import { ViewportMetaKeys } from '../constants'
+import { getOrigin } from './utils'
 
 // convert viewport object to string for viewport meta tag
 function resolveViewportLayout(viewport: Viewport) {
@@ -45,6 +46,10 @@ export function ViewportMeta({ viewport }: { viewport: ResolvedViewport }) {
 }
 
 export function BasicMeta({ metadata }: { metadata: ResolvedMetadata }) {
+  const manifestOrigin = metadata.manifest
+    ? getOrigin(metadata.manifest)
+    : undefined
+
   return MetaFilter([
     <meta charSet="utf-8" />,
     metadata.title !== null && metadata.title.absolute ? (
@@ -64,7 +69,13 @@ export function BasicMeta({ metadata }: { metadata: ResolvedMetadata }) {
       <link
         rel="manifest"
         href={metadata.manifest.toString()}
-        crossOrigin="use-credentials"
+        // If it's same origin, and it's a preview deployment,
+        // including credentials for manifest request.
+        crossOrigin={
+          !manifestOrigin && process.env.VERCEL_ENV === 'preview'
+            ? 'use-credentials'
+            : undefined
+        }
       />
     ) : null,
     Meta({ name: 'generator', content: metadata.generator }),

packages/next/src/lib/metadata/generate/utils.ts

@@ -14,4 +14,15 @@ function resolveAsArrayOrUndefined<T>(
   return resolveArray(value) as any
 }
 
-export { resolveAsArrayOrUndefined, resolveArray }
+function getOrigin(url: string | URL): string | undefined {
+  let origin = undefined
+  if (typeof url === 'string') {
+    try {
+      url = new URL(url)
+      origin = url.origin
+    } catch {}
+  }
+  return origin
+}
+
+export { resolveAsArrayOrUndefined, resolveArray, getOrigin }

test/e2e/app-dir/metadata/metadata.test.ts

@@ -228,7 +228,7 @@ describe('app dir - metadata', () => {
       // Manifest link should have crossOrigin attribute
       await matchDom('link', 'rel="manifest"', {
         href: '/api/manifest',
-        crossOrigin: 'use-credentials',
+        crossOrigin: isNextDeploy ? 'use-credentials' : null,
       })
 
       await matchDom('meta', 'name="theme-color"', {
@@ -263,7 +263,7 @@ describe('app dir - metadata', () => {
       // Manifest link should have crossOrigin attribute
       await matchDom('link', 'rel="manifest"', {
         href: '/api/manifest',
-        crossOrigin: 'use-credentials',
+        crossOrigin: isNextDeploy ? 'use-credentials' : null,
       })
     })