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

olivier_vd

last month

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'),
  },
});

Jarrod
Payload Team
last month
Your cors URL’s should not have trailing slashes
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).
Jarrod
Payload Team
last month
Are you using the env var cors or the dying version?
olivier_vd
last month
not sure, where do I set these?

do I need to add some parameters in my .env?
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
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
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 👍
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
Jarrod
Payload Team
last month
Yeah because cors does not apply to insomnia
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 🙂
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.