Strict Origin when Cross Origin axios Next Js Strapi

Questions and Answers
1
System Information
  • Strapi Version:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

I am working on a Next Js based Dashboard and Strapi CMS based API System

So in the dashboard, I am calling an API http://localhost:1337/api/batches but
I am receiving a strict-origin-when-cross-origin error, which eventually blocks my request.

And this error only comes if the dashboard is accessed through local IP (i.e. 192.168.0.106)
So when the dashboard is accessed through http://192.168.0.106:3001 then it throws an error but not when accessed through http://localhost:3001

NOTE that strapi backend URL remains the same i.e. http://localhost:1337/api/...

As part of allowing all origins in strapi
In the strapi part, in config/middlewares.js I have mentioned

{
    name: "strapi::cors",
    config: {
      enabled: true,
      header: "*",
      origin: "*",
    },
  },

BUt still receiving the error.

Till evening it was all fine, it was working fine, but without doing anything it started throwing this error
When I was the first time setting up strapi, I faced this error but hat solved by setting origin to *, but this time

When accessed through local IP
When accessed through localhost