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

gregwhitworth

6 months ago

8

• 

  badjab326

  6 months ago

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

• 

  gregwhitworth

  6 months ago

  @badjab326 no I haven't, do you have any recommendations on how to do this?

• 

  badjab326

  6 months ago

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

  6 months ago

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

  
  
  

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

• 

  jacobsfletch

  Payload Team

  5 months 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