NextJS FetchError ETIMEDOUT

Viewed 233

I deployed my project on centos 7 that port forwarded to 8080 which means, we use the site using ip then :8080. And here is the NGINX config I used for my front-end and backend reverse proxy

Site nginx config

server {
        listen       80;
        listen       [::]:80;
        server_name  myapp.com etc.com;
        
        #my api
        location / {
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_set_header X-Auth-Request-Redirect "http://api.myapp.com";
                proxy_cache_bypass                      $http_upgrade;
                proxy_pass                          http://127.0.0.1:3333;
                proxy_http_version      1.1;
                proxy_buffer_size          128k;
                proxy_buffers              4 256k;
                proxy_busy_buffers_size    256k;
                proxy_redirect                  off;
                #proxy_cookie_path / "/; SameSite=lax; HTTPOnly; Secure";
        }
        
        #my app
        location /myapp {
                proxy_set_header Host               $host;
                proxy_set_header X-Real-IP          $remote_addr;
                proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto  $scheme;
                proxy_set_header X-Auth-Request-Redirect "http://ipaddress:8080/adminpage";
                proxy_cache_bypass                      $http_upgrade;
                proxy_pass                          http://127.0.0.1:3000;
                proxy_http_version      1.1;
                proxy_buffer_size          128k;
                proxy_buffers              4 256k;
                proxy_busy_buffers_size    256k;
                #proxy_cookie_path / "/; SameSite=lax; HTTPOnly; Secure";
        }

}

I got this error

 FetchError: request to http://ipaddress:8080/auth/checkauth failed, reason: connect ETIMEDOUT ipaddress:8080
     at ClientRequest.<anonymous> (/root/web/myapp/node_modules/next/dist/compiled/node-fetch/index.js:1:64142)
     at ClientRequest.emit (node:events:527:28)
     at Socket.socketErrorListener (node:_http_client:454:9)
     at Socket.emit (node:events:527:28)
     at emitErrorNT (node:internal/streams/destroy:157:8)
     at emitErrorCloseNT (node:internal/streams/destroy:122:3)
     at processTicksAndRejections (node:internal/process/task_queues:83:21) {
   type: 'system',
   errno: 'ETIMEDOUT',
   code: 'ETIMEDOUT'
 }

_middleware.ts

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export async function middleware(req: NextRequest) {
  const token = req.cookies;
  const urlClone = req.nextUrl.clone();
  urlClone.pathname = `/404`;

  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/checkauth`, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token.app_token}`,
    },
  });

  if (res.status === 200) {
    return NextResponse.next();
  }
  return NextResponse.rewrite(urlClone);
}

The app works fine in production, also with my Axios api. I can login thru my app using axios request but my middleware that have fetch api and getServerSideProps that also have fetch api having connect ETIMEDOUT error.

What I tried so far

  • proxy agent
  • change fetch api to axios with adapter
  • tried playing with url
  • set cors on my API to all and true

I can also call my api endpoint using curl inside the server and postman on my local machine

My other NextJS app that being deployed in linux server same procedure also, it does have fetch api in middleware and getServerSideProps works fine but that server is not port forwarded to any port. I'm wondering if that could be the issue

I used NextJS v12.1.6

1 Answers

I solved this by replacing my await fetch base url to localhost http://127.0.0.1:3333 (api host) on the server. Works perfect on my case.

const res = await fetch(`http://127.0.0.1:3333/auth/checkauth`, {
    method: 'GET',
    headers: {
      Authorization: `Bearer ${token.app_token}`,
    },
  });

Related