How to fix site images not showing on the custom domain

the_real_ninja.6 months ago

6

Accessing Files Outside of Payload Cloud

• 

  denolfe

  6 months ago

  they do not show.
  

  Can you give more info? Is this when trying to render from the admin panel or some other place? What errors if any are shown in console?

• 

  the_real_ninja.6 months ago

  As you can see, all the images are blank.

  
  
  

  Error on console

  
  

  Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' <URL> <URL>".
  Understand this error

  
  

  
  

  What I want it to look like both in

  mrtrendydesigns.com

  and

  www.mrtrendydesigns.com

  

  
• 

  denolfe

  6 months ago

  Can you try adding your custom domain to your CORS array?

  https://payloadcms.com/docs/configuration/overview#options
• 

  the_real_ninja.6 months ago

  I've already tried that (or maybe I'm doing it wrong?)

  
  
  

  payload.config.ts

  
  

  ...
  
  cors: [
      'https://checkout.stripe.com',
      'https://www.mrtrendydesigns.com',
      process.env.PAYLOAD_PUBLIC_SERVER_URL || '',
    ].filter(Boolean),
    csrf: [
      'https://checkout.stripe.com',
      'https://www.mrtrendydesigns.com',
      process.env.PAYLOAD_PUBLIC_SERVER_URL || '',
    ].filter(Boolean),
  
  ...

• 

  denolfe

  6 months ago

  Looks like someone had a similar issue here:

  https://discord.com/channels/967097582721572934/1229712159689281536
• 

  the_real_ninja.6 months ago

  To anyone who faces this issue in the future, I managed to solve this by adding my origin url in the img-src property like so;

  
  
  

  csp.js

  
  

  'img-src': [
      "'self'",
      'https://*.stripe.com',
      'https://www.example.com',
      'https://raw.githubusercontent.com',
    ],

  
  
  

  and also, make sure you have the same url in the cors and csrf sections

  
  
  

  payload.config.ts

  
  

    cors: [
      'https://checkout.stripe.com',
      'https://www.example.com',
      process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://mrtrendydesigns.com',
    ].filter(Boolean),
    csrf: [
      'https://checkout.stripe.com',
      'https://www.example.com',
      process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://mrtrendydesigns.com',
    ].filter(Boolean),