[3.0.0-beta.32] CORS error in upload collection in live preview

[heytyler]

Link to reproduction

No response

Describe the Bug

I am working on setting up a multi-tenant CMS with payload and ran into a CORS issue with live preview on upload collections. My CMS is running on localhost:3000 and my site is running on localhost:3001. If I edit any other block, the data populates through the live preview as expected, but when I add an image from my upload collection, it gives me a CORS error and doesn't populate the image url/data until I publish.

Error Recieved
Access to fetch at 'http://localhost:3000/api/images?depth=2&where[id][in]=1' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Attached is a video of the bug to help explain what I am talking about:

CORS.mp4

Please let me know if you need any more information, would love to find a way to get this to work. Appreciate the help and the hard work you guys have been putting in on 3.0!

Here is my payload.config. If you need me to drill into any of the values I can provide, but I figured I'd show how my CORS is set up:

export default buildConfig({
  admin: payloadAdmin,
  cookiePrefix: 'evogic',
  serverURL: process.env.NEXT_PUBLIC_PAYLOAD_URL || 'http://localhost:3000',
  cors: '*',
  globals: payloadGlobals,
  collections: payloadCollections,
  plugins: payloadPlugins,
  editor: payloadEditor,
  secret: process.env.PAYLOAD_SECRET || 'evogic',
  db: payloadDatabase,
  typescript: {
    outputFile: path.resolve(dirname, 'payload-types.ts'),
  },
  upload: { limits: { fileSize: 25000000 } },
  sharp,
})

To Reproduce

1. Create Images Collection

import type { CollectionConfig } from 'payload/types'

export const Images: CollectionConfig = {
  slug: 'images',
  access: {
    read: () => true,
  },

  upload: {
    focalPoint: true,
    crop: true,
    imageSizes: [...sizes],
    formatOptions: { format: 'webp' },
    mimeTypes: ['image/*'],
    adminThumbnail: 'thumbnail',
  },

  admin: {
    useAsTitle: 'name',
    group: 'Media',
  },

  fields: [...fields],
}

2. Create Image Block

import { Block } from 'payload/types'

export const ImageBlock: Block = {
  slug: 'imageBlock',

  fields: [
    {
      name: 'image',
      type: 'upload',
      relationTo: 'images',
    },
   ...otherFields
  ],
}
}

3. Try to use image block within a page in live preview mode with the website accessing the CMS from another domain.

Expected Output / Response When Published

{
    "id": "6646b38773433b6a30cfe225",
    "width": "100%",
    "height": "100%",
    "size": "Original",
    "blockName": null,
    "blockType": "imageBlock",
    "image": {
        "id": 1,
        "alt": null,
        "project": 1,
        "updatedAt": "2024-05-17T01:21:13.409Z",
        "createdAt": "2024-05-17T01:21:13.409Z",
        "url": "http://localhost:3000/api/images/file/matadortyler_An_expansive_lush_green_lawn._Stock_photo._Adverti_dd380898-8bce-464a-b247-f9c733f84568.webp",
        "thumbnailURL": "http://localhost:3000/api/images/file/matadortyler_An_expansive_lush_green_lawn._Stock_photo._Adverti_dd380898-8bce-464a-b247-f9c733f84568-400x300.webp",
        "filename": "matadortyler_An_expansive_lush_green_lawn._Stock_photo._Adverti_dd380898-8bce-464a-b247-f9c733f84568.webp",
        "mimeType": "image/webp",
        "filesize": 204884,
        "width": 1456,
        "height": 816,
        "sizes": {...sizes},
        }
    }
}

Actual Output When Editing In Live Preview
As you can see, the image is returning null and I am recieving the CORS error mentioned above.

{
    "id": "6646b38773433b6a30cfe225",
    "width": "100%",
    "height": "100%",
    "size": "Original",
    "blockName": null,
    "blockType": "imageBlock",
    "image": null
}

Payload Version

3.0.0-beta.32

Adapters and Plugins

db-postgres, storage-s3

[heytyler]

I also wanted to point out that if I add http://localhost:3001 to my CORS in payload.config, images work. But since this will be a multi tenant site with multiple domains being connected to it, this is less than ideal. I would prefer if images would function like the other fields do as they seem to work fine with the wildcard CORS setting.