-
|
When I configured cors: '*' in payload.config.ts, I still got a CORS error when accessing it with other ports. Can anyone please advise on how to solve this issue? cors: '*',
rateLimit: {
trustProxy: true,
window: 2 * 60 * 1000, // 2 minutes
max: 2400, // limit each IP per windowMs
}, |
Beta Was this translation helpful? Give feedback.
Replies: 8 comments 11 replies
-
|
I have found a solution to fix the CORS issue, but it's not elegant. I believe the server.ts configuration not working should be considered a bug.The code is written in server.ts. var cors = require('cors');
var corsOptions = {
origin: '*',
credentials: true,
optionsSuccessStatus: 200
}
app.use(cors(corsOptions));it need run“yarn add cors” first， |
Beta Was this translation helpful? Give feedback.
-
|
Normally, you set cors to an array of domains that you would like to accept requests from. Setting cors to cors: ['http://localhost:3000'] |
Beta Was this translation helpful? Give feedback.
-
|
I try to write like |
Beta Was this translation helpful? Give feedback.
-
http:// is not a part of domain, and |
Beta Was this translation helpful? Give feedback.
-
|
CORS is indeed behaving strangely. import { buildConfig } from 'payload/config';
import path from 'path';
import Categories from './collections/Categories';
import Posts from './collections/Posts';
import Tags from './collections/Tags';
import Users from './collections/Users';
import Media from './collections/Media';
export default buildConfig({
serverURL: `${process.env.PUBLIC_URL || 'http://localhost'}:${process.env.PAYLOAD_PORT || 3000}`,
admin: {
user: Users.slug,
},
collections: [Categories, Posts, Tags, Users, Media],
typescript: {
outputFile: path.resolve(__dirname, 'payload-types.ts'),
},
graphQL: {
schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
},
...(process.env.PUBLIC_URL
? {
cors: [(`${process.env.PUBLIC_URL}:${process.env.PAYLOAD_PORT}`)].filter(Boolean),
csrf: [(`${process.env.PUBLIC_URL}:${process.env.PAYLOAD_PORT}`)].filter(Boolean),
}
: {}),
})And add my But no matter what I get cors trying to connect to port 3000 instead of the PAYLOAD_PORT. If I leave everything as is and hardcode the full url+port ONLY into serverURL: 'https://localhost:8000',magically cors start to work as expected, even by leaving the config above. |
Beta Was this translation helpful? Give feedback.
-
|
Looks like webpack initialize |
Beta Was this translation helpful? Give feedback.
-
|
did you find any solution? i noticed that too :( |
Beta Was this translation helpful? Give feedback.
-
|
I could be wrong, but I believe Also, if you still have issues, try deleting the .cache and restart it. |
Beta Was this translation helpful? Give feedback.
-
|
I am constantly getting cors error on mine, regardless of what value i enter. |
Beta Was this translation helpful? Give feedback.
-
|
This is still not working properly. Tried all combinations:
Only |
Beta Was this translation helpful? Give feedback.
-
|
It seems to me like you are accessing the API that listens at Try adding |
Beta Was this translation helpful? Give feedback.
-
|
If I see correctly that your frontend is hosted at |
Beta Was this translation helpful? Give feedback.
-
|
I'm sorry I must be really dumb, but why TF do you need to add the payload URL to the accepted CORS? You should need to add only the frontend URL, no? I thought it was like this for the past 5 years, no? why do you need to allow the server itself to make requests to itself? I never had to do this before? Why? |
Beta Was this translation helpful? Give feedback.
-
|
To clarify this a bit more, here is what I think is happening behind the scenes:
The server probably doesn't make requests to itself, the frontend makes a request to Payload. Regarding your comment and my answer above @dhiegomaga, did it work for you after adding both URLs or is one sufficient? I think you should be fine without adding the Payload URL to the CORS config. Don't really know why I suggested adding both URLs 🤷 Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Watching, seeing the same issue. |
Beta Was this translation helpful? Give feedback.
-
|
Tried to do this the right way by listing my cors urls in the payload config but didnt work. I am deploying a docker container on a Ubuntu 20 google vm. routing from ports 80 to 3000. I listed my google ip and local host in all relavant variation that made sense and still kept getting these errors when i would go the ip address of the vm. |
Beta Was this translation helpful? Give feedback.
-
|
Are you using Payload 3? If so, try listing the URLs in the Next.js config file (https://nextjs.org/docs/pages/api-reference/next-config-js/headers#cors) since the payload app is a Next.js Api Route. |
Beta Was this translation helpful? Give feedback.
-
|
For anyone still struggling, in my case it was case-sensitivity of the HTTP method. |
Beta Was this translation helpful? Give feedback.
-
|
Work for me import { withPayload } from '@payloadcms/next/withPayload'
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: "/api/:path*",
headers: [
{
key: "Access-Control-Allow-Origin",
value: "http://34.70.117.216",
},
{
key: "Access-Control-Allow-Methods",
value: "GET, POST, PUT, DELETE, OPTIONS",
},
{
key: "Access-Control-Allow-Headers",
value: "Content-Type, Authorization",
},
{
key: "Access-Control-Allow-Credentials",
value: "true",
},
],
},
];
}, |
Beta Was this translation helpful? Give feedback.
I have found a solution to fix the CORS issue, but it's not elegant. I believe the server.ts configuration not working should be considered a bug.The code is written in server.ts.
it need run“yarn add cors” first，