Setting up CORS on OpenLiteSpeed

How Can We Help?
< Back
You are here:
Print

Enabling Cross-Origin Resource Sharing

Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain boundaries. If you serve public content, please consider using CORS to open it up for universal JavaScript/browser access. CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests.  To enable CORS, you will need to set header Access-Control-Allow-Origin *

How to Enable CORS

To enable cores, you will need to set the extra header for the virtual host “/” context. For Apache, normally you can set the header in the virtual host document root .htaccess however you can not use the same rule for OLS since OLS only supports rewrite rules in .htaccess, nothing else.  You will need to set such header through OLS Web Admin Console GUI or vi OLS VH configuration file directly.

Add CORS extra header through OLS Web Admin console

Navigate to Web Admin > Configurations > Your Virtual Hosts > Context:

  1. Click the Add button
  2. Choose Static type
  3. URI = / (You can change this if you want to)
  4. Location = $DOC_ROOT/ (You can change this if you want to)
  5. Accessible = Yes
  6. Extra Headers = Access-Control-Allow-Origin *
  7. Click the Save button
  8. Do a graceful restart

Add CORS extra header through vi OLS configuration file directly

Locate and edit OLS virtual host configuration file, such as for example VH configuration file at vi /usr/local/lsws/conf/vhosts/Example/vhconf.conf .

You will need to look for context / {...} section and manually add extraHeaders Access-Control-Allow-Origin * within that section, it will be looking like the following:

context / {
  location                $DOC_ROOT/
  allowBrowse             1
  extraHeaders            Access-Control-Allow-Origin *

  rewrite  {
RewriteFile .htaccess
  }
  addDefaultCharset       off

  phpIniOverride  {

  }
}

How to Verify it is Working

Before verification

Check that our response header includes Access-Control-Allow-Origin *.

 

Start verification

Testing CORS is not easy. Here we are going to use the Test-cors online tool to verify it with simple steps.
The tool looks like this. We need to enter the HTTP Method and Target Remote URL

  • Send Request with the default supported method, e.g. GET:

  • Send Request with an unsupported method, e.g. DELETE:

  • You can also copy the code from the testing tool to test on your own:
var createCORSRequest = function(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // Most browsers.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8 & IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
};

var url = 'http://Your_Domain/xxx';
var method = 'DELETE';
var xhr = createCORSRequest(method, url); 

xhr.onload = function() {
  // Success code goes here.
};

xhr.onerror = function() {
  // Error code goes here.
};

xhr.send();

How to Support More CORS Methods

By default, CORS supports the following methods: PUSHGET and HEAD. What if you want to support OPTIONS and DELETE, as well?

You can simply append to Extra HeadersAccess-Control-Allow-Methods GET, POST, OPTIONS, DELETE.

Try verification again, and this time send the DELETE HTTP method. You should see a 200 response.

More Information About CORS