CODEWITHSUNDEEP
node.jsreactjsmern
jordn
jordn

Reputation: 49

Getting "blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." with MERN stack using Axios

I have a MERN stack setup with my React front end on one server instance and my backend Node-Express API on another. In development I have no issues, but if I try uploading a file over 1MB in production I get the CORS error. If it's below 1MB it uploads just fine.

Node-Express Middleware:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  }); // I have tried without this as well.

  app.use(fileUpload({
    createParentPath: true,
    limits: { 
      fileSize: 64 * 1024 * 1024 * 1024 // 64MB max file(s) size
    },
  })) / I have tried without the limits, too.

  app.use(cors()); // I have tried even by including the origin parameter

React

 axios.post(`${apiEndpoint}/upload`, data, { 
      headers: { "x-auth-token":token } 
    })
      .then((response) => console.log(response.data));

Upvotes: 3

Views: 975

Answers (1)

jordn
jordn

Reputation: 49

Thanks to awesome people in the comments it was pointed out that I should check the logs. For some reason, like a noob, I didn't think to do this. Once I did, I discovered that nginx hadn't been configured for a greater file upload size. I set that to 100Mb and it worked like a charm.

Upvotes: 1

Related Questions