Mini dashboard does not work on meilisearch running on sub routes

[bidoubiwa]

Description
see issue

The mini dashboard only works when MeiliSearch is running at the root of it's domain.
For example if the instance is hosted here http://mymeili.com then the dashboard will show correctly

If for example the dashboard is in a sub route like http://myapp.com/api then the mini dashboard does not show up.

For example http://104.248.162.211/api/. It is a white page.
But if you curl on the same URL

➜  ~ curl http://104.248.162.211/api/health
{"status":"available"}%

Meaning that while the mini dashboard does not show up, meilisearch is still running correctly.

The problematic line is this one in src/App.js:

export const baseUrl =
  process.env.REACT_APP_MEILI_SERVER_ADDRESS ||
  (process.env.NODE_ENV === 'development'
    ? 'http://0.0.0.0:7700'
    : window.location.origin)

window.location.origin takes the root of the domain whereas href takes the current position:

On this page for example

The problem with changing to href is that now the mini dashboard is accessible on every sub-route on not only the root of the meilisearch instance.

example nginx config to reproduce:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    server_name _;

    location /api/ { # trailing slash is important
        proxy_pass http://127.0.0.1:7700/; # trailing slash is important
    }
}

Expected behavior
The mini dashboard should show up at the root of where meilisearch is running

Current behavior
It only works when meilisearch is at the root

Environment (please complete the following information):

• Meilisearch version: v0.25.2

[mskyttner]

Related meilisearch/product#295

[gmourier]

Do we have any news on this? It looks like a bug fix more than a new feature to me.

The problem with changing to href is that now the mini dashboard is accessible on every sub-route on not only the root of the meilisearch instance.

@bidoubiwa This is the most direct solution but do we have another one at hand?

[bidoubiwa]

I'm not sure this is something we want as a curl on /search I think would return the HTML page. Though I'm sure there is a solution I don't have the required knowledge to play with path and redirections.

[firstred]

Not sure yet what the nginx equivalent is, but I managed to solve the problem with Caddy by matching the Referer header.
If the request's Referer header contains /search/, it will strip /search from the path and effectively serve css js etc. from root.

route {
  ##### Ensure trailing slash
  redir /search /search/

  ##### Serve Meilisearch from a subfolder, by matching the path
  @meilisearch path /search/*
  ##### Serve assets from the subfolder, by matching the HTTP Referer header
  @meilisearch_assets header Referer */search/*

  handle @meilisearch {
    uri strip_prefix /search
    header X-Forwarded-Proto {scheme}
    header X-Forwarded-Host {host}
    reverse_proxy meilisearch:7700
  }

  handle @meilisearch_assets {
    uri strip_prefix /search
    header X-Forwarded-Proto {scheme}
    header X-Forwarded-Host {host}
    reverse_proxy meilisearch:7700
  }
}

[urbantrout]

I have adopted @firstred’s answer for nginx:

location /search {
  rewrite /search/(.*) /$1 break;
  proxy_pass http://127.0.0.1:7700;
}

location / {
  if ($http_referer ~* ^.*/search/.*$ ) {
    proxy_pass  http://127.0.0.1:7700;
  }
}

[mdubus]

Thanks a lot for your answers and suggestions 🙏

I'll now close this issue as this can be fixed with the nginx configuration.

Have a nice day ☀️

[firstred]

Great! @urbantrout thanks a lot for sharing the nginx version!