title: ExpressJs Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://
body: <p>I have created RESTful API in express and calling API from nextjs both hosted in heroku.</p>
  <p>For GET requests things work perfectly. I can fetch data from API, but for POST request I was getting following error</p>
  <p><a href="https://i.stack.imgur.com/TINFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TINFe.png" alt="enter image description here" /></a></p>
  <p>For the past 2 days, I can't solve this problem.</p>
  <p>In API I have enabled cors and tried many methods to enable cors.</p>
  <p>It's working for GET request but not for POST request</p>
  <p><strong>server.js</strong></p>
  <pre><code>import cors from &quot;cors&quot;;
  ...
  
  //Try 1
  const whitelist = [&quot;https://pixkiryaclient1.herokuapp.com&quot;];
  
  const corsOptionsDelegate = (req, callback) =&gt; {
    let corsOptions;
  
    const isDomainAllowed = whitelist.indexOf(req.header(&quot;Origin&quot;)) !== -1;
    if (isDomainAllowed) {
      // Enable CORS for this request
      corsOptions = { origin: true };
    } else {
      // Disable CORS for this request
      corsOptions = { origin: false };
    }
    callback(null, corsOptions);
  };
  app.use(cors(corsOptionsDelegate));
  
  
  //Try 2
  // app.use(
  //   cors({
  //     origin: &quot;https://pixkiryaclient1.herokuapp.com&quot;,
  //     methods: &quot;GET,HEAD,PUT,PATCH,POST,DELETE&quot;,
  //     preflightContinue: false,
  //     optionsSuccessStatus: 204,
  //   })
  // );
  
  
  // Try 3
  // app.use(function (req, res, next) {
  //   res.setHeader(
  //     &quot;Access-Control-Allow-Origin&quot;,
  //     &quot;https://pixkiryaclient1.herokuapp.com&quot;
  //   );
  //   // res.setHeader(&quot;Access-Control-Allow-Methods&quot;, &quot;GET, POST, PUT, DELETE&quot;);
  //   // res.setHeader(&quot;Access-Control-Allow-Headers&quot;, &quot;Content-Type&quot;);
  //   // res.setHeader(&quot;Access-Control-Allow-Credentials&quot;, &quot;true&quot;);
  //   next();
  // });
  
  
  //Try 4
  // const whitelist = [&quot;https://pixkiryaclient1.herokuapp.com&quot;];
  
  // const corsOptions = {
  //   //@ts-ignore
  //   origin: function (origin, callback) {
  //     if (!origin || whitelist.indexOf(origin) !== -1) {
  //       callback(null, true);
  //     } else {
  //       callback(new Error(&quot;Not allowed by CORS&quot;));
  //     }
  //   },
  
  //   credentials: true,
  // };
  
  // app.use(cors(corsOptions));
  
  
  
  //Try 5
  
  // const corsOptions: cors.CorsOptions = {
  //   origin: &quot;https://pixkiryaclient1.herokuapp.com&quot;,
  //   optionsSuccessStatus: 200, // For legacy browser support
  //   methods: &quot;OPTIONS, GET, PUT, POST, DELETE&quot;,
  // };
  
  // app.use(cors(corsOptions));
  
  
  </code></pre>
  <p>None of the above trys working for POST requests.</p>
  <p><strong>In nextJS I am calling API as:</strong></p>
  <pre><code> const res = await post(
     'https://pixkiryaapi.herokuapp.com/api/v1/auth/login',
     {
       body: { email, password },
     }
   );
  
  </code></pre>
  <p><strong>post.js</strong></p>
  <pre><code>const axiosIntance = axios.create({
    baseURL: 'https://pixkiryaapi.herokuapp.com/api/v1',
    responseType: 'json',
  });
  
  
  export function post(
    url,
    { params = {}, body = {}} = {}
  ) {
    return axiosIntance({
      url,
      params,
      data: body,
      method: 'POST',
    }).then((response) =&gt; response.data);
  }
  </code></pre>