Allow CORS for Virtualmin Remote API

I’m developing a frontend with Angular 7 and consumes Virtualmin Remote API but my GET requests are getting denied because of CORS policy.

With Postman or cURL the GET request works fine (also the OPTIONS request) but not with Angular HTTP, it’s possible to set CORS policy in the Virtualmin Remote API? How?


My headers are:

"Access-Control-Allow-Origin": "*",
"Content-Type": "application/json",
"cache-control": "no-cache",
Authorization: "Basic XXXXXXXXXXXXXXXXXXX"

I’m trying to get all the domains, https://example.com:10000/virtual-server/remote.cgi?json=1&program=list-domains

Virtualmin’s Remote API doesn’t have native CORS support since it’s primarily meant for server-to-server communication, which doesn’t typically involve cross-origin requests from browsers. However, you can implement a workaround to enable CORS in a few ways.

Solutions to Enable CORS for Virtualmin Remote API

  1. Use a Proxy Server: Create a proxy server (e.g., with Express.js or Nginx) to act as an intermediary between your Angular app and Virtualmin. This avoids the CORS issue by routing requests through a server on the same origin. Here’s a basic example with Express.js:
const express = require("express");
const request = require("request");
const app = express();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

app.get("/api", (req, res) => {
  request(
    { url: "https://example.com:10000/virtual-server/remote.cgi?json=1&program=list-domains" },
    (error, response, body) => {
      if (error) return res.status(500).send(error);
      res.send(body);
    }
  );
});

app.listen(3000, () => {
  console.log("Proxy server running on port 3000");
});

Now you can point your Angular app to http://localhost:3000/api.
2. Set Up Nginx as a Reverse Proxy: If you have control over Nginx, set it up to serve as a reverse proxy and add CORS headers to the response. Here’s a configuration example:

location /api/ {
    proxy_pass https://example.com:10000/;
    proxy_set_header Host $host;
    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "Authorization, Content-Type";
}

You would need to direct your Angular app’s requests to https://yourdomain.com/api/virtual-server/remote.cgi.
3. Use JSONP (Less Preferred): JSONP can work for GET requests, but since it’s an older approach and doesn’t support POST, it’s generally not recommended for RESTful APIs.
4. Modify Your Angular Requests: Make sure to set up Angular’s HttpClient with appropriate headers, but be aware that even with the headers, a CORS policy on the server is necessary. Using a proxy is typically the most reliable solution.

By using a proxy server or Nginx configuration, you can bypass the CORS restrictions and ensure your Angular app can communicate seamlessly with the Virtualmin Remote API.