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

default discord avatar
olivier_vd
last month
19

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
    Payload Team
    last month

    Your cors URL’s should not have trailing slashes

  • default discord avatar
    olivier_vd
    last month

    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
    Payload Team
    last month

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

  • default discord avatar
    olivier_vd
    last month

    not sure, where do I set these?



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

  • discord user avatar
    Jarrod
    Payload Team
    last month

    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
    last month

    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
    Payload Team
    last month

    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
    last month

    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
    Payload Team
    last month

    Yeah because cors does not apply to insomnia

  • default discord avatar
    olivier_vd
    last month

    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
    Payload Team
    last month

    Nice!

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.