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:
- Click the Add button
- Choose Static type
- URI =
/(You can change this if you want to) - Location =
$DOC_ROOT/(You can change this if you want to) - Accessible =
Yes - Extra Headers =
Access-Control-Allow-Origin * - Click the Save button
- 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: PUSH, GET and HEAD. What if you want to support OPTIONS and DELETE, as well?
You can simply append to Extra Headers: Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE.
Try verification again, and this time send the DELETE HTTP method. You should see a 200 response.
