you are likely calling an external API.

in the pages router, the API is called from the browser, where CORS is required; but the external API didn't set up CORS for your website to fetch, so there are CORS errors

in the app router, you are likely calling the API from a server component; then it is called not from your browser but from your server where CORS is irrelevant

thank you very much, i have the same idea on how the error happen but are not sure. so there is no way for me to use the api in page router unless the api owner setup the cors frist?

to replicate the behaviour in the app router, you can call the api in getStaticProps/getServerSideProps/similar functions – they are run in the server not the browser so no need to care about CORS

ah yes i manage to do it, but is it possible for me to call an api store the data and then re fetch the api again every 3 seconds without hitting the cors error? I want to be able to refetch the api with server side

to refresh server components (app router): router.refresh()

to refresh getServerSideProps (pages router):
https://github.com/vercel/next.js/discussions/12646#discussioncomment-142591

to avoid CORS errors while using react-query or swr or similar client-side data fetching libraries:
https://stackoverflow.com/a/65467719