CORS header ‘Access-Control-Allow-Origin’ missing
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
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?
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
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 👍
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
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!
@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. 🥺
it's simply the base URI of the FE app
Continue the discussion in Discord
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.