Avoiding CORS Issues in React/Next.js

Cross-Origin Resource Sharing (CORS) 是一个让开发人员有些头疼的事。当在服务器调用外部api时，经常报这个错。以下有两种方法避免：

1. 安装CORS library (https://www.npmjs.com/package/cors) 并告诉服务器访问，

   app.use(cors({
       origin: 'http://127.0.0.1:3000',
   }))

2. 增加代理proxy，

   const url;
   if (process.env.NODE_ENV === "production") {
       url = "https://www.example.com/whoami"
   } else {
       url = "http://127.0.0.1:4000/whoami"
   }
   fetch(url)

   在package.json文件添加：

   "proxy": "http://localhost:4000",

   假如使用 Next.js 的话，在next.config.js文件下添加如下：

   module.exports = {
     async rewrites() {
       return [
         {
           source: '/api/:path*',
           destination: 'http://localhost:4000/:path*'
         }
       ]
     }
   }