CORS header ‘Access-Control-Allow-Origin’ missing

default discord avatar
olivier_vd
8 months ago
13

I'm having trouble using fetch to render my data client-side



this is my current config;



import { buildConfig } from 'payload/config'; import path from 'path'; import Users from './collections/Users'; import Studios from "./collections/Studios"; import Agents from "./collections/Agents"; import StudioPost from "./collections/StudioPost" import studioEvent from "./collections/StudioEvent"; import Categories from "./collections/Categories"; export default buildConfig({ serverURL: process.env.PAYLOAD_URL, cors: [process.env.PAYLOAD_URL].filter(Boolean), // cors admin: { user: Users.slug, }, collections: [ Users, Studios, StudioPost, studioEvent, Categories, Agents ], typescript: { outputFile: path.resolve(__dirname, 'payload-types.ts'), }, graphQL: { schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'), }, });


this is how I'm trying to fetch client-side;


import React from "react"; async function usePayloadQuery(_key, collection) { const key = [{_key}] const _baseURL = "https://p01--admin-cms--qbt6mytl828m.code.run/api/" + collection const response = await fetch(_baseURL, { credentials: 'include', headers:{ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }, crossOrigin: true, accept: 'application/json', dataType: "jsonp", type: 'GET' }) return await response.json() } export default usePayloadQuery;


payload config;



import { buildConfig } from 'payload/config'; import path from 'path'; import Users from './collections/Users'; import Studios from "./collections/Studios"; import Agents from "./collections/Agents"; import StudioPost from "./collections/StudioPost" import studioEvent from "./collections/StudioEvent"; import Categories from "./collections/Categories"; export default buildConfig({ serverURL: process.env.PAYLOAD_URL, cors: [""].filter(Boolean), // cors admin: { user: Users.slug, }, collections: [ Users, Studios, StudioPost, studioEvent, Categories, Agents ], typescript: { outputFile: path.resolve(__dirname, 'payload-types.ts'), }, graphQL: { schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'), }, });
  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Your cors URL’s should not have trailing slashes

  • default discord avatar
    olivier_vd
    8 months ago

    hmm just removed the trailing slash but it's still throwing the same error at me.



    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

    https://p01--admin-cms--qbt6mytl828m.code.run/api/studios

    . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.



    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

    https://p01--admin-cms--qbt6mytl828m.code.run/api/studios

    . (Reason: CORS request did not succeed). Status code: (null).

  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Are you using the env var cors or the dying version?

  • default discord avatar
    olivier_vd
    8 months ago

    not sure, where do I set these?



    do I need to add some parameters in my .env?

  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Oops typo. I meant to ask if you were hard coding the cors or using your example where you used an env

  • default discord avatar
    olivier_vd
    8 months ago

    i'm using the example 🙂



    the process.env.PAYLOAD_URL points to my northflank, the herokuapp is the front-end application (reactJS).



    maybe I'm making a mistake there

  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Are you importing your env in your payload config file? You will need to import it there and in your server file for your build to have access to your env vars 👍

  • default discord avatar
    olivier_vd
    8 months ago

    yes it's imported in both. The app is running fine, I just can't fetch the data via the restAPI.



    in insomnia it works fine when i make the request though

  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Yeah because cors does not apply to insomnia

  • default discord avatar
    olivier_vd
    8 months ago

    ok i fixed it



    i had to set "proxy" in the package.json of my react app. At least that does it for now 🙂

  • discord user avatar
    jarrod_not_jared
    Payload Team
    8 months ago

    Nice!

  • default discord avatar
    _thaotruong
    5 months ago

    @olivier_vd : how did you set 'proxy' in the package.json of your FE app? I've got my Payload CMS on NorthFlank and my FE Nextjs on Vercel. I've been getting the cors errors while trying to hit the backend API. 🥺

  • default discord avatar
    olivier_vd
    5 months ago

    it's simply the base URI of the FE app

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.