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*'
          }
        ]
      }
    }