How to fix No-Cors issue?

default discord avatar
mrofas200
7 months ago
24

When I try to fetch data from payload cms, I tried to use fetch() but it failed because it did need to set mode: 'no-cors'



when I set headers: {'content-type' : 'application/json'} but it didn't work and type is text/plain



        const result = await fetch(PUBLIC_PAYLOAD_SERVER_URL, {
            method: 'POST',
            mode: 'no-cors',
            headers: new Headers({
                'content-type': 'application/json'
            }),
            body: GetSiteBannerQuery()
        });
  • default discord avatar
    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?

  • default discord avatar
    mrofas200
    7 months ago

    payload is running locally



    @noheadphones it doesn't work.



    this is server config:

  • default discord avatar
    noheadphones
    7 months ago

    you shouldnt need to fetch with

    no-cors

    mode

  • default discord avatar
    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: []
    });
  • default discord avatar
    noheadphones
    7 months ago

    does

    GetSiteBannerQuery

    return a graphql query?

  • default discord avatar
    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()
            });
  • default discord avatar
    noheadphones
    7 months ago

    for development/testing only I'd set

    cors

    and

    csrf

    to

    ['*']
  • default discord avatar
    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.

    image.png
  • default discord avatar
    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?

  • default discord avatar
    mrofas200
    7 months ago

    Hi @noheadphones



    I fixed issue.



    Thank you. 🙂

  • default discord avatar
    noheadphones
    7 months ago

    Great! What was the problem?

  • default discord avatar
    mrofas200
    7 months ago

    I had to set No-Cors.

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.