Uppy Tus does not work with Nginx Proxy Reverse

Tus
1

Hello. Please, help me :cry:

When I click upload, a request is sent to http//:192.168.100.104/uploads instead of http//:192.168.100.104:8000/uploads

Console error:

PATCH http://192.168.100.104/uploads/fc5b6926e402362897fb241c9e42dff0 net::ERR_CONNECTION_REFUSED

Nginx runs on port 8000 proxying data for the express js server.
And tus server is integrated into express.

Tus client:

new Uppy().use(Tus, {
  endpoint: "http://192.168.100.104:8000/uploads",
  chunkSize: 1024 * 1024 * 200, // 200 MB
})

Nginx Config:

server {
    listen 8000;
    server_name _;

    location / {
        proxy_pass http://192.168.100.104:3000;
        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_buffering off;
    }
}

express js:

const uploadFilesRouter = Router();

const server = new Server({
  respectForwardedHeaders: true,
  path: "/uploads",
  datastore: new FileStore({ directory: "files" }),
});

router.all("*", (req, res, next) => {
  console.log(req.method, req.url);
  server.handle(req, res);
});

In the main file I import like this:

app = express();
app.use("/uploads", fileUploadRouter );
2

The Nginx variable $host does not include the port, so you have to use

proxy_set_header X-Forwarded-Host $host:$server_port

instead. See Add note about port of X-Forwarded-Host to nginx.conf example by Chaoses-Ib · Pull Request #1190 · tus/tusd · GitHub.

3

Thanks for the answer, but now there is another problem :frowning:

The request is sent to localhost/files/ instead of localhost/api/files

Error:

[Uppy] [23:56:46] tus: invalid or missing offset value, originated from request (method: HEAD, url: http://localhost/files/ab737be615b4a9f4c9d324ee35ebc460, response code: 200, response text: , request id: n/a)

Uppy:

new Uppy().use(Tus, {
    endpoint: "http://localhost/api/files",
    removeFingerprintOnSuccess: true,
    headers: {
      Authorization: `Bearer ${token}`,
      "X-Topic-Id": topic._id,
    },
    chunkSize: 1024 * 1024 * 200, // 200 MB
  })

Nginx conf:

server {
    listen 80;
    server_name _;

    location / {
        proxy_pass http://localhost:5173;
        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:$server_port;
        proxy_buffering off;
    }

    location /api {
        proxy_pass http://localhost:3000;
        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:$server_port;
        proxy_buffering off;
        client_max_body_size 512M;
    }
}
4

You have configured Nginx to strip the /api path prefix without telling tus-node-server about. So tus-node-server generates URLs without the prefix.

To fix this you can either use a custom URL generation function in tus-node-server that includes the /api prefix: tus-node-server/packages/server at main · tus/tus-node-server · GitHub

Or you can instruction Nginx to forward the prefix by updating its config to

proxy_pass http://localhost:3000/api;

and passing

path: "/api/files",

to the Server constructor from tus-node-server.

I hope this helps.

5

Thank you so much for being patient with people like me. I did exactly as you said and everything worked :blush:

1 Like