How to fix No-Cors issue?

mrofas200

7 months ago

24

        const result = await fetch(PUBLIC_PAYLOAD_SERVER_URL, {
            method: 'POST',
            mode: 'no-cors',
            headers: new Headers({
                'content-type': 'application/json'
            }),
            body: GetSiteBannerQuery()
        });

• 

  noheadphones

  7 months ago

  In payload do you have the cors configured?

  
  https://payloadcms.com/docs/configuration/overview#options
  https://payloadcms.com/docs/authentication/overview#csrf-protection
  

  
  

  Is payload on a server or running locally?

• 

  mrofas200

  7 months ago

  payload is running locally

  
  

  
  

  @noheadphones it doesn't work.

  
  

  
  

  this is server config:

• 

  noheadphones

  7 months ago

  you shouldnt need to fetch with

  no-cors

  mode

• 

  mrofas200

  7 months ago

  import { buildConfig } from 'payload/config';
  import path from 'path';
  import SiteBanner from './globals/SiteBanner';
  import Users from './collections/Users';
  
  export default buildConfig({
    serverURL: 'http://localhost:3000',
    admin: {
      user: Users.slug,
    },
    collections: [
      Users,
    ],
    globals: [
      SiteBanner
    ],
    typescript: {
      outputFile: path.resolve(__dirname, 'payload-types.ts'),
    },
    graphQL: {
      schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
    },
    plugins: []
  });

• 

  noheadphones

  7 months ago

  does

  GetSiteBannerQuery

  return a graphql query?

• 

  mrofas200

  7 months ago

  export const GetSiteBannerQuery = () => {
    return JSON.stringify(
      {
        query: `query SiteBannerQuery {
          SiteBanner {
              backgroundColor
              textColor
              textContent
              isActive
          }
        }`
      }
    );
  };

  
  

  
  

  const result = await fetch(PUBLIC_PAYLOAD_SERVER_URL, {
              method: 'POST',
              mode: 'no-cors',
              headers: new Headers({
                  'content-type': 'application/json'
              }),
              body: GetSiteBannerQuery()
          });

• 

  noheadphones

  7 months ago

  for development/testing only I'd set

  cors

  and

  csrf

  to

  ['*']
• 

  mrofas200

  7 months ago

  it doesn't work out.

  
  

  
  

  const getSiteBanner = async () => {
          const result = await fetch("http://localhost:3000/api/graphql", {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: GetSiteBannerQuery()
          });
  
          const resultSiteBanner = await result.json();
  
          console.log('result site banner: ', resultSiteBanner);
  
          if (resultSiteBanner?.data?.SiteBanner) {
        siteBanner = resultSiteBanner?.data?.SiteBanner;
      }
      };

  
  

  
  

  import { buildConfig } from 'payload/config';
  import path from 'path';
  import SiteBanner from './globals/SiteBanner';
  import Users from './collections/Users';
  
  export default buildConfig({
    serverURL: 'http://localhost:3000',
    cors: ['*'],
    csrf: ['*'],
    admin: {
      user: Users.slug,
    },
    collections: [
      Users,
    ],
    globals: [
      SiteBanner
    ],
    typescript: {
      outputFile: path.resolve(__dirname, 'payload-types.ts'),
    },
    graphQL: {
      schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
    },
    plugins: []
  });

  
  

  
  

  
  

  
  

  @noheadphones @dribbens @jmikrut I hope you would help me give some direction to fix this issue.

  
• 

  noheadphones

  7 months ago

  im comparing it to my code, I can't see anything clearly obvious

  
  

  
  

  do you think you can package this in a reproducible repo?

• 

  mrofas200

  7 months ago

  Hi @noheadphones

  
  

  
  

  I fixed issue.

  
  

  
  

  Thank you. 🙂

• 

  noheadphones

  7 months ago

  Great! What was the problem?

• 

  mrofas200

  7 months ago

  I had to set No-Cors.