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

default discord avatar
olivier_vdlast year
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'), }, });
  • Your cors URL’s should not have trailing slashes

  • default discord avatar
    olivier_vdlast year

    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).

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

  • default discord avatar
    olivier_vdlast year

    not sure, where do I set these?



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

  • 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_vdlast year

    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

  • 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_vdlast year

    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

  • Yeah because cors does not apply to insomnia

  • default discord avatar
    olivier_vdlast year

    ok i fixed it



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

  • Nice!

  • default discord avatar
    _thaotruong12 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_vd12 months ago

    it's simply the base URI of the FE app

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

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