nextjs axios requests inside getServerSideProps always return 404 after deployment with nginx

user_9918477 0
Viewed 365

I have nextjs app running on ec2 instance with nodejs backend

When the app makes an axios request inside useEffect it works perfectly, but when the app sends a request from inside getServersideProps function it fails with 404 status code and the request does not arrive to backend at all.

This is the nginx file

server {
server_name frontend.domain.com;
location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    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-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

    # we need to remove this 404 handling
    # because of Next's error handling and _next folder
    # try_files $uri $uri/ =404;
}

listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/frontend.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/frontend.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    server_name api.domain.com;
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_pass         http://localhost:8080;
    }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/frontend.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/frontend.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

This is the axios configuration:

    const configModified = {
  baseURL: 'https://api.domain.com',
  withCredentials: true,
  headers:{},
  adapter: cache.adapter
  // global customizations
}
    export const request = (request) => {
  const source = axios.CancelToken.source();
  return {
    request: axios({ ...configModified, ...request}, cancelToken: source.token }),
    source
  }
}

it is working on localhost as expected but after deployment the requests fails only in getServerSideProps function

axios next.js reactjs node.js nginx
1 Answers

You have to modify your axios instance based on you are on the server or client.

export default ({ req }) => {
  if (typeof window === "undefined") {
    // We are on the server
    return axios.create({
      baseURL:
        "http://ingress-nginx-controller.ingress-nginx.svc.cluster.local",
      headers: req.headers,
    });
  } else {
    // We must be on the browser
    return axios.create({
      baseUrl: "https://api.domain.com",
      // if it causes error
      //   baseUrl: "/"
    });
  }
};

then when you are on server, pass the context object

export const getServerSideProps = async (context) => {
  const client = buildClient(context);
  ...
};
user_102628050
Related