axios post request retrning error: Cross-Origin Request Blocked

Question

i am using axios to post some data to my node server but its giving me this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at MY_NODE_URL. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

this is my code:

 const url = "https://blooming-escarpment-74540.herokuapp.com/blog/postBlog";

 axios
    .post(url ,{
        title: document.getElementById("title").value,
        post: document.getElementById("post").value,
        blogImage:document.getElementById("blogImage").files[0],
     
    })
    .then((response) => {
      const result = response.data;
      if (result.status == "SUCCESS") {
       console.log("SUCCESS");
       
      } else {
        console.log("BAd");
      }
    })
    .catch((error) => {
      console.log(error);
    });

this error still shows even if i use fetch API or even XHR

Answer 1

you have to install the cors package on your node js backend

Usage

const express = require('express')
const cors = require('cors');

const app = express();
app.use(cors());