-2

This is the error that I get: Access to XMLHttpRequest at 'http://localhost:5050/api/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my index.js code from my express API:

const express = require('express');
require('dotenv').config();
const { errorHandler } = require('./middleware/errorMiddleware');
require('colors');
const connectDb = require('./config/dbConnect');
const PORT = process.env.PORT || 5050;
const cors = require('cors');

// Connect DB
connectDb();

// Routes
const inviteRoutes = require('./routes/inviteRoutes');
const userRoutes = require('./routes/userRoutes');
const postRoutes = require('./routes/postRoutes');

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

const corsOptions = {
  origin: 'http://localhost:3000',
};
app.use(cors(corsOptions));

app.use('/api/invite', inviteRoutes);
app.use('/api/users', userRoutes);
app.use('/api/posts', postRoutes);

app.use(errorHandler);

app.listen(PORT, () => {
  console.log(`Server started on port: ${PORT}`);
});
meek
  • 39
  • 3
  • The requested port doesn't match the allowed port. – Teemu Apr 23 '23 at 09:43
  • Can you add the definition of a specific route, including the _methods_ setting, that is failing to your question? – John Williams Apr 23 '23 at 09:46
  • If i change with port 5050 it gives me this error: "Acess to XMLHttpRequest at 'http://localhost:5050/api/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:5050' that is not equal to the supplied origin." – meek Apr 23 '23 at 09:46
  • this in not a port problem - 'http://localhost:3000' is correct for your setup - pages served from 3000, server running on 5050 – John Williams Apr 23 '23 at 09:49
  • Try with origin: '*', to see if its pure cors or an OPTIONS call issue. – John Williams Apr 23 '23 at 09:59
  • still get the same error: " Access to XMLHttpRequest at 'http://localhost:5050/api/posts/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." – meek Apr 23 '23 at 10:01
  • ok so it's not the origin setting. as per my previous request please add the definition of a specific route, ie app.get('/failingpath', (req, res) =>{ – John Williams Apr 23 '23 at 10:05
  • this is the route "router.post('/', protect, createPost);" – meek Apr 23 '23 at 10:06
  • Note that CORS is a browser managed process. Before the browser allows a cross origin call it makes a so-called pre-flight call to the route. This OPTIONS call returns in headers which methods, origins and headers may be used on the route. If the request being made fits the the permitted OPTIONS then the browser allows it to go through. – John Williams Apr 24 '23 at 16:42

1 Answers1

-1

CORS options in your NodeJS are not the same as your CORS Browser restrictions. While NodeJS is allowed to block or allow certain origins, your browser has it's own set of filters that will block the request regardless of your server configuration.

To allow your browser to fetch data from a different port, you need to disable your browser web security with --disable-web-security (for chrome). Here's a link to guide you through the process

savageGoat
  • 1,389
  • 1
  • 3
  • 10