CORS Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’)

joelcorey

2 months ago

9

• 

  notchr

  2 months ago

  Hey @joelcorey - have you tried explicitly listing your allowed origins?

• 

  joelcorey

  2 months ago

  export default buildConfig({
    serverURL: 'http://localhost:5000',
    cors: [
      'http://localhost',
      'http://localhost:5000',
      'example.com',
      'example.com:5000'
    ].filter(Boolean),
    admin: {
      user: Users.slug,
    },
    collections: [Categories, Posts, Tags, Users, Media, ServiceCategories],
    typescript: {
      outputFile: path.resolve(__dirname, 'payload-types.ts'),
    },
    graphQL: {
      schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
    },
    plugins: [
      cloudStorage({
        collections: {
          'media': {
            adapter
          },
        },
      }),
    ],
  })

  Like that?

  
  

  
  

  Just listing whatever I can think of at this point haha

• 

  jarrod_not_jared

  Payload Team

  2 months ago

  Looks like you are trying to auth from your frontend to your backend using

  credentials: include

  right?

  
  

  
  

  You should add the domains that you want to auth from to the

  csrf

  array on the config, this allows you to attach the http only cookies when using credentials on the request.

• 

  joelcorey

  2 months ago

  cors: [
      'http://localhost',
      'http://localhost:5000',
      'https://example.com',
      'https://example.com:5000'
    ].filter(Boolean),

  seems to be working

  
  

  
  

  Not sure as to why because honestly it has been an age since I have had to deal with CORS.

• 

  notchr

  2 months ago

  I think that a wildcard value is no longer accepted for specific request types? I could be wrong, but manually listing your origins I believe is the accepted way to deal with CORS/CSRF

• 

  jarrod_not_jared

  Payload Team

  2 months ago

  We get this question a lot, and I credit that to the swarm of people on the internet posts telling people to use the wildcard for allow origins 💀

  
  
  

  This (

  https://github.com/payloadcms/payload/blob/master/src/express/middleware/corsHeaders.ts#L10

  ) is the line in payload that causes people trouble when they do that. When allow origins is

  *

  you

  cannot

  set

  Access-Control-Allow-Credentials

  to

  true

  , it is just not possible bc of web standards. So you need to explicitly set your CORS to be the domains that you would like to authenticate with using http-only cookies, i.e. the domains that you would like to be able to send

  credentials: include

  from. This way when the client makes the preflight request to the server, the server responds and says "yeah, I can accept credentials from this domain", then your actual request is made and credentials are sent along, allowing you to authenticate.

• 

  joelcorey

  2 months ago

  Seems worthy of a blog post to me

• 

  jarrod_not_jared

  Payload Team

  2 months ago

  I kinda feel the same

• 

  notchr

  2 months ago

  @jarrod_not_jared @joelcorey I started a little something but I got a lot of tasks today 😦

  
  

  
  

  https://docs.google.com/document/d/1poYjxyTfhuF_JAnOs7d_gzYoAVHLToHDskfK2r9QQNU/edit?usp=sharing
  

  
  

  Please feel free to continue / revise / trash that as necessary haha