Next.js(React)でのCORSエラー解決（Next.js + Golang）

Next.jsでのCORSエラー解決（Next.js + Golang）

React + GoでSPAを作りたく、ReactフレームワークのNext.jsを使ってみた。
SPAの最初で躓きがちなCORSエラーについて、案の定ハマったのでメモ。（Angularでの開発の際もだいぶハマった思い出）

CORSエラーが出る

今回のようにフロントエンド、バックエンドでサーバを分けて開発する際に、そのままだとCORS(Cross-Origin Resource Sharing)についてのエラーが発生する。

これはブラウザの機能として、クロスドメイン（ドメインの違うサーバへの）アクセスが制限されているため起きます。
例えば、フロント http://localhost:3000 , バック http://localhost:5000 とした時、フロントからバックのapiを叩こうとするとcorsエラーとなります。（ドメイン違うので）

正常にapi叩くにはこれを解決する必要があります。

Next.jsではカスタムサーバを利用し、プロキシする

Next.jsでカスタムサーバを使用するため、 プロジェクトルートにserver.js を作成します。

また、 http-proxy-middleware というパッケージを使い、任意のリクエストをプロキシします。

server.js

const express = require('express');
const next = require('next');
const { createProxyMiddleware } = require('http-proxy-middleware');

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const API_URL = process.env.API_URL || 'http://localhost:5010'

const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express();

  server.use(
    '/api',
    createProxyMiddleware({
      target: API_URL,
      pathRewrite: {
        "^/api": ""
      },
      changeOrigin: true
    })
  );

  server.all('*', (req, res) => {
    return handle(req, res)
  });

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  });
});

カスタムサーバを利用してサーバ起動するので package.json を修正します。

package.json

...
"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
...

これで yarn dev でカスタムサーバで立ち上がります。

リクエストがプロキシされる

上記により、 /api へのリクエストは http://localhsot:5010 にプロキシされます。
例えば /api/auth へリクエストした場合、 http://localhost:5010/auth にプロキシされます。

pathRewrite の記述を消せば http://localhost:5010/api/auth にアクセスします。

まとめ

Next.jsのcorsエラーの解決は、カスタムサーバと http-proxy-middleware パッケージの利用で解決できます。

また忘れてハマりそうなのでメモしておいた。

参考

Next.js 公式ドキュメント日本語翻訳プロジェクト - カスタムサーバーとルーティング

Nextで特定のAPI リクエストをproxyする方法 - Qiita