This is an old revision of the document!


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.

Method 1: Set from htaccess file

Navigate to Web Admin > Configurations > Your Virtual Hosts > General > HT Access section:

  1. Click Edit button
  2. Enable Limit, Auth, FileInfo, Indexes, Options form Allow Override
  3. Click Save button
  4. Do graceful restart

Set CORS header to .htaccess file of your Virtual Hosts location

  1. Create .htaccess file if not exist and writable, e.g.
    file='/usr/local/lsws/DEFAULT/html/.htaccess';
    ( [ -e "$file" ] || touch "$file" ) && [ ! -w "$file" ] && echo cannot write to $file && exit 1
  2. Add Header Set Access-Control-Allow-Origin "*" to .htaccess file

Method 2: Set from config

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

  1. Click Add button
  2. Choose Static type
  3. Set URI / (Change this if you want)
  4. Set Location $SERVER_ROOT/Example/html/ (Change this if you want)
  5. Set Accessible to Yes
  6. Extra Headers Access-Control-Allow-Origin *
  7. Click Save button
  8. Do graceful restart
    \\

Before verification

we can check our response header include Access-Control-Allow-Origin *.

Start verification

Test CORS is not easy, here we are going to use Test-cors online tool to verify it with simple step.
Tool shows like this, basically we need to enter in HTTP Method and Target Remote URL

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

  • Send with default unsupported method, e.g. DELETE:

  • You can also copy the code from testing tool to test by 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 method

Default CORS support method: PUSH, GET and HEAD. What if I want to support OPTIONS and DELETE?

Method 1: Set from htaccess file

You can simply append Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE" to .htaccess file

Method 2: Set from config

You can simply append Extra Headers Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE.

You can try verification again with sending DELETE HTTP method. You will see 200 response.

  • Admin
  • Last modified: 2017/10/09 14:05
  • by Lisa Clarke