[Bug]: problem with accessing interface from another computer

[Kiciulek]

What happened?

When I try to access Quivr page from another computer in the same local network, this happens: I cannot even login/register via that.

I would like to run Quivr on my server and have a possibility to access it from any device in my local network. How to make it work? I've thought it will perfectly work when I replace "localhost" with an IP adres of the sever. I can connect, but functionality is zero.

When I operate it directly on my server (via localhost:3000) it works fine.

Relevant log output

No response

Twitter / LinkedIn details

No response

[dosubot[bot]]

🤖

Hello,

Based on the information you've provided and similar issues I found in the Quivr repository, it seems like you might need to adjust the 'DEFAULT_BACKEND_URL' in the CONSTANTS.ts file.

Here's how you can do it:

export const DEFAULT_BACKEND_URL = "http://your.server.ip.address:5050";

Replace 'your.server.ip.address' with the actual IP address of your server.

Please note that you might need to restart your server for the changes to take effect. Also, ensure that your server's firewall settings allow incoming connections on the specified port (5050 in this case).

In the context shared, the docker-compose.yml file shows that the backend-core service, which is likely the Quivr application, is set to expose port 5050. This means that the Docker container running your Quivr application will be listening for connections on this port. Make sure that this port is also open in your server's firewall settings.

You can find more details in these files:

• cms/quivr/config/server.js
• cms/quivr/Dockerfile
• frontend/lib/config/CONSTANTS.ts
• docker-compose.yml

Unfortunately, I couldn't find the exact error message or behavior you're experiencing when trying to access the Quivr interface from another computer in the same local network. Could you please provide more details about the error message or behavior you're experiencing? This will help me provide a more accurate solution.

Looking forward to your response.

Sources

• Beyond Boundaries: Help Me Reach My Quivr Instance on Home PC from Anywhere!"
• How to access Quivr hosted on a remote VPS?
• cms/quivr/config/server.js
• cms/quivr/Dockerfile
• frontend/lib/config/CONSTANTS.ts
• docker-compose.yml

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[Kiciulek]

1) I stopped a docker container. 2) I've change a line export const DEFAULT_BACKEND_URL = "http://your.server.ip.address:5050"; to export const DEFAULT_BACKEND_URL = "http://10.10.0.185:5050"; in frontend/lib/config/CONSTANTS.ts 3) I've rebuilt a container using docker compose -f docker-compose.yml up --build command 4) I restarted a Docker nad PC, Annnd I've got the same bad result... localhost:3000 works, 10.10.0.185:3000 does not.

10.10.0.185:5050 shows: {"status":"OK"}

What am I doing wrong?

[zsp0901]

1. I stopped a docker container.
2. I've change a line export const DEFAULT_BACKEND_URL = "http://your.server.ip.address:5050"; to export const DEFAULT_BACKEND_URL = "http://10.10.0.185:5050"; in frontend/lib/config/CONSTANTS.ts
3. I've rebuilt a container using docker compose -f docker-compose.yml up --build command
4. I restarted a Docker nad PC, Annnd I've got the same bad result... localhost:3000 works, 10.10.0.185:3000 does not.

10.10.0.185:5050 shows: {"status":"OK"}

What am I doing wrong?

I solved this issue by adding the real IP to 'const ContentSecurityPolicy' in frontend/next.config.js.

[Kiciulek]

I solved this issue by adding the real IP to 'const ContentSecurityPolicy' in frontend/next.config.js.

I found the part of a code in the file that you have mentioned.

const ContentSecurityPolicy = { "default-src": [ "'self'", "https://fonts.googleapis.com", process.env.NEXT_PUBLIC_SUPABASE_URL, "https://api.june.so", process.env.NEXT_PUBLIC_FRONTEND_URL, ], "connect-src": [ "'self'", process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_BACKEND_URL, "https://api.june.so", "https://api.openai.com", "https://cdn.growthbook.io", "https://vitals.vercel-insights.com/v1/vitals", ], "img-src": ["'self'", "https://www.gravatar.com", "data:"], "media-src": [ "'self'", "https://user-images.githubusercontent.com", process.env.NEXT_PUBLIC_FRONTEND_URL, "https://quivr-cms.s3.eu-west-3.amazonaws.com", ], "script-src": [ "'unsafe-inline'", "'unsafe-eval'", "https://va.vercel-scripts.com/", process.env.NEXT_PUBLIC_FRONTEND_URL, "https://www.google-analytics.com/", ], "frame-ancestors": ["'none'"], "style-src": ["'unsafe-inline'", process.env.NEXT_PUBLIC_FRONTEND_URL], };

Could you guide me more specifically – where exactly do I put my IP? In each section? default-src, connect-src, img-src, media-src, script-src, frame-ancestors?

[exiled4disco]

Was there any answer to this? I'm having the same issue. Thank you.

[MeTaNoV]

Indeed, just add the default localhost and define the real values for your ENV VAR like:

/* eslint-disable max-lines */
const nextConfig = {
  images: {
    domains: [
      "www.quivr.app",
      "quivr-cms.s3.eu-west-3.amazonaws.com",
      "www.gravatar.com",
    ],
  },
  // eslint-disable-next-line prefer-arrow/prefer-arrow-functions
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};

const ContentSecurityPolicy = {
  "default-src": [
    "'self'",
    "https://fonts.googleapis.com",
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    "https://api.june.so",
    "http://localhost:*",
    process.env.NEXT_PUBLIC_FRONTEND_URL,
  ],
  "connect-src": [
    "'self'",
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_BACKEND_URL,
    "https://api.june.so",
    "https://api.openai.com",
    "https://cdn.growthbook.io",
    "https://vitals.vercel-insights.com/v1/vitals",
  ],
  "img-src": ["'self'", "https://www.gravatar.com", "data:"],
  "media-src": [
    "'self'",
    "https://user-images.githubusercontent.com",
    "http://localhost:*",
    process.env.NEXT_PUBLIC_FRONTEND_URL,
    "https://quivr-cms.s3.eu-west-3.amazonaws.com",
  ],
  "script-src": [
    "'unsafe-inline'",
    "'unsafe-eval'",
    "https://va.vercel-scripts.com/",
    "http://localhost:*",
    process.env.NEXT_PUBLIC_FRONTEND_URL,
    "https://www.google-analytics.com/",
  ],
  "frame-ancestors": ["'none'"],
  "style-src": [
    "'unsafe-inline'", 
    "http://localhost:*",
    process.env.NEXT_PUBLIC_FRONTEND_URL
  ],
};

// Build CSP string
const cspString = Object.entries(ContentSecurityPolicy)
  .map(([key, values]) => `${key} ${values.join(" ")};`)
  .join(" ");

// Define headers
const securityHeaders = [
  {
    key: "Content-Security-Policy",
    value: cspString,
  },
  {
    key: "Referrer-Policy",
    value: "origin-when-cross-origin",
  },
  {
    key: "X-Frame-Options",
    value: "SAMEORIGIN",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=(), interest-cohort=()",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=31536000",
  },
];
//AJouter le content security policy uniquement en pre-vew et en prod

// Check if the SENTRY_DSN environment variable is defined
if (process.env.SENTRY_DSN) {
  // SENTRY_DSN exists, include Sentry configuration
  const { withSentryConfig } = require("@sentry/nextjs");

  module.exports = withSentryConfig(
    nextConfig,
    {
      // For all available options, see:
      // https://github.com/getsentry/sentry-webpack-plugin#options

      // Suppresses source map uploading logs during build
      silent: true,

      org: "quivr-0f",
      project: "javascript-nextjs",
    },
    {
      // For all available options, see:
      // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

      // Upload a larger set of source maps for prettier stack traces (increases build time)
      widenClientFileUpload: true,

      // Transpiles SDK to be compatible with IE11 (increases bundle size)
      transpileClientSDK: true,

      // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
      tunnelRoute: "/monitoring",

      // Hides source maps from generated client bundles
      hideSourceMaps: true,

      // Automatically tree-shake Sentry logger statements to reduce bundle size
      disableLogger: true,
    }
  );
} else {
  // SENTRY_DSN does not exist, export nextConfig without Sentry
  module.exports = nextConfig;
}

[Kiciulek]

Thank you. I've added IP of my server in each section you did. It has fixed the problem on the server, but another problem occurred.

When I'm accessing Quivr from another PC, I don't get access to resources. I can log in, but there are no brains. After login, I get this error: I repeat, it seems to work when I'm accessing Quivr directly from the server, but there is a problem to get the same result using it from another PC.

[github-actions[bot]]

Thanks for your contributions, we'll be closing this issue as it has gone stale. Feel free to reopen if you'd like to continue the discussion.