１つのサーバー上でNginxを用いて、Node.js(Express)とNext.jsを公開したい

Question

サーバーのローカル上で、localhost:3000にNext.jsが動いていて、useSWRにてlocalhost:3001で動いているNode.js(Express)のAPI情報を取得させています。

ローカル上で、両者とも動かすとCORSのエラーでAPIが取得できないため、Expressのapp.jsに以下を入れてみたところ、ローカル上ではAPIが取得できて動作しました。

const cors = require("cors");

app.use(cors());

Nginxを用いて公開したいのですが、CORSの以下のエラーが出てしまい解決手法が分からない状況です。

Access to fetch at 'http://localhost:3001/api/users' from origin 'http://xxx.xxx.xxx.xxx' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.

Nginxの設定は以下となります
/etc/nginx/conf.d/default.conf

server {
        listen 80 default_server;

        server_name xxx.xxx.xxx.xxx;

        client_max_body_size 50M;

        location / {
                proxy_pass http://localhost:3000;
        }
}

バージョンは以下となります。
Ubuntu 20.04.4
node 16.13.0
npm 8.1.0
next 12.1.5

Answer 1

APIへの接続先はどのように指定していますか？ http://localhost:3001/api のように指定していないでしょうか？
nginx では80番ポートで待ち受けているようなので、 http://localhost/api のように指定するとよいのではないでしょうか。