Exposing Foxx to the browser

There are three ways to use Foxx in a web application:

• Accessing Foxx from an application server that exposes its own API.

• Using a web server like Apache or nginx as a reverse proxy to exposeonly the Foxx service.

• Exposing ArangoDB directly by running ArangoDB on a public port.

Using an application server

Accessing Foxx from an application server is probably the safest approach asthe application server shields the database from the browser entirely. Howeverthis also adds the most development overhead and may result in unnecessaryduplication of access logic.

This approach works best if you’re using Foxx in an existing application stackor want to use an ArangoDB driverto access the database API directly alongside your Foxx service.

As Foxx services provide ordinary HTTP endpoints, you can access them from yourexisting application server using any run-of-the-mill HTTP client with JSONsupport. Some ArangoDB drivers also let you access arbitrary HTTP endpoints.

Example (Node with arangojs):

"use strict";
const express = require("express");
const app = express();
const { Database } = require("arangojs");
const db = new Database();
db.useDatabase("mydb");
const service = db.route("/my-foxx");
app.get("/", async function(req, res) {
  // Passes the response from '/_db/mydb/my-foxx/hello'
  const response = await service.get("/hello");
  res.status(response.statusCode);
  res.write(response.body);
  res.end();
});
app.listen(9000);

Using a reverse proxy

For information on setting up the Apache web server as a reverse proxy checkthe official Apache 2.4 documentation.For nginx checkthe nginx admin guide.Similar documentation exists forlighttpd andMicrosoft IIS.

Example (nginx):

location /api/ {
  proxy_pass http://127.0.0.1:8529/_db/_system/my-foxx/;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Host $host:$server_port;
  proxy_set_header X-Forwarded-Proto $scheme;
}

Example (Apache):

<Location /api>
  RequestHeader set X-Forwarded-Proto "https" # or "http"
  # Other X-Forwarded-* headers are set automatically
  ProxyPass http://127.0.0.1:8529/_db/_system/my-foxx
</Location>

The advantage of this approach is that it allows you to expose just the serviceitself without exposing the entire database API.

This approach also works well if you’re already using a web server to serveyour web application frontend files and want your frontend to talk directly tothe service.

Note: when running Foxx behind a reverse proxy some properties of therequest object will reflect the proxy rather than the original request source(i.e. the browser). You can tell Foxx to expect to run behind a trusted proxyby enabling the trustProxy property of the service context:

// in your main entry file, e.g. index.js
module.context.trustProxy = true;

Foxx will then trust the values of the following request headers:

• x-forwarded-proto for req.protocol
• x-forwarded-host for req.hostname and req.port
• x-forwarded-port for req.port
• x-forwarded-for for req.remoteAddress and req.remoteAddresses

Note that this property needs to be set in your main entry file. Setting it inthe setup script has no effect.

Exposing ArangoDB directly

This is the most obvious but also most dangerous way to expose your Foxxservice. Running ArangoDB on a public port will expose the entire database APIand allow anyone who can guess your database credentials to do whateverthey want.

Unless your service is explicitly intended to be used by people who alreadyhave access to the ArangoDB web interface, you should go with one of the otherapproaches instead.

Only use this for internal services intended to helpusers who already have full access to the database.Don’t ever expose your database to the public Internet.

Cross-Origin Resource Sharing (CORS)

If you are running ArangoDB on a public port andwant a web app running on a different port or domain to access it,you will need to enable CORS in ArangoDB.

First you need toconfigure ArangoDB for CORS.As of 3.2 Foxx will then automatically whitelist all response headers as they are used.

If you want more control over the whitelist or are using an older version ofArangoDB you can set the following response headers in your request handler:

• access-control-expose-headers: a comma-separated list of response headers.This defaults to a list of all headers the response is actually using(but not including any access-control headers).

• access-control-allow-credentials: can be set to "false" to forbidexposing cookies. The default value depends on whether ArangoDBtrusts the origin. See thenotes on http.trusted-origin.

Note that it is not possible to override these headers for the CORS preflightresponse. It is therefore not possible to accept credentials or cookies onlyfor individual routes, services or databases. The origin needs to be trustedaccording to the general ArangoDB configuration (see above).