Access to fetch localhost:8000/api/graphql has been blocked due to CORS

gregwhitworth7 months ago

5

• 

  badjab3262 years ago

  Have you installed CORS and added it as a middleware in your server.js/server.ts?

  
  
  

  Yeah, just run

  npm install cors

  on your project, and in the server.js add

  const cors = require('cors')

  to your imports, and

  app.use(cors())

  to your middleware

  
  
  

  Here's an example of what my server.js looks like

  
  
  

  const express = require('express');
  const payload = require('payload');
  const cors = require('cors')
  const router = express.Router();
  const app = express();
  require('dotenv').config();
  
  // Redirect root to Admin panel
  app.get('/', (_, res) => {
    res.redirect('/admin');
  });
  
  //middleware
  app.use('/api', router)
  app.use(cors())
  app.use(express.urlencoded({extended: true}))
  app.use(express.json())
  
  // Initialize Payload
  payload.init({
    secret: process.env.PAYLOAD_SECRET,
    mongoURL: process.env.MONGODB_URI,
    express: app,
    onInit: () => {
      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
    },
  });
  
  // Add your own express routes here
  
  app.listen(process.env.PORT);

• 

  christopher.nowlan2 years ago

  @612318753635565792

  Have you got something like this in your payload.config.ts

  
  
  

      cors: [
          'http://localhost:3000',
          PAYLOAD_PUBLIC_APP_URL,
      ].filter(Boolean), 

• 

  jacobsfletch

  2 years ago

  Exactly, you can define

  cors

  directly within your Payload config. Here are the docs for that:

  https://payloadcms.com/docs/configuration/overview
  
  

  Custom CORS middleware would really only be necessary for something like custom root endpoints described here:

  https://payloadcms.com/docs/rest-api/overview#custom-endpoints
• 

  scrongly8 months ago

  @808734492645785600

  I'm a year late to the party and using V3 but I'm running into this issue with custom endpoints on collections. cors and csrf are set up in the config as per the documentation but the only way I've got a custom endpoint to work is by adding custom cors headers to the custom endpoint response, which doesn't seem ideal. I know the docs say you're responsible for securing your own endpoints, but what does that actually mean?

• 

  gfwgfw8 months ago

  Same here. Custom endpoint CORS need setup by nextjs