Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
litespeed_wiki:config:cors [2017/10/06 14:30] Eric Leu [Start verification] |
litespeed_wiki:config:cors [2017/10/09 14:14] Lisa Clarke [Start verification] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== Enabling Cross-Origin Resource Sharing ====== | ====== 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. | + | 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. |
Line 6: | Line 6: | ||
===== How to Enable ===== | ===== How to Enable ===== | ||
- | ==== Method 1: Set from .htaccess==== | + | ==== Method 1: Set from htaccess file==== |
Navigate to **Web Admin > Configurations > Your Virtual Hosts > General > HT Access section**: | Navigate to **Web Admin > Configurations > Your Virtual Hosts > General > HT Access section**: | ||
- | - Click **Edit** button | + | - Click the **Edit** button |
- | - Enable ''Limit'', ''Auth'', ''FileInfo'', ''Indexes'', ''Options'' form **Allow Override** | + | - Enable ''Limit'', ''Auth'', ''FileInfo'', ''Indexes'', ''Options'' from **Allow Override** |
- | - Click **Save** button | + | - Click the **Save** button |
- | - Do graceful restart | + | - Do a graceful restart |
- | Set CORS header to .htaccess file | + | Set CORS header to the ''.htaccess'' file of your Virtual Hosts location |
- | - Create .htaccess file if not exist and writable, e.g. \\ <code>file='/usr/local/lsws/DEFAULT/html/.htaccess'; | + | - Create ''.htaccess'' if it doesn't exist and make it writable, e.g. \\ <code>file='/usr/local/lsws/DEFAULT/html/.htaccess'; |
( [ -e "$file" ] || touch "$file" ) && [ ! -w "$file" ] && echo cannot write to $file && exit 1</code> | ( [ -e "$file" ] || touch "$file" ) && [ ! -w "$file" ] && echo cannot write to $file && exit 1</code> | ||
- | - Add ''<nowiki>Header Set Access-Control-Allow-Origin "*"</nowiki> '' to .htaccess file \\ {{:litespeed_wiki:config:cors-9.png?|}} | + | - Add ''<nowiki>Header Set Access-Control-Allow-Origin "*"</nowiki> '' to ''.htaccess'' file \\ {{:litespeed_wiki:config:cors-9.png?|}} |
Line 22: | Line 22: | ||
- Click **Add** button | - Click **Add** button | ||
- Choose **Static** type | - Choose **Static** type | ||
- | - Set URI **/** (Change this if you want) | + | - Set **URI** to ''/'' (You can change this if you want to) |
- | - Set Location **$SERVER_ROOT/Example/html/** (Change this if you want) | + | - Set **Location** to ''$SERVER_ROOT/Example/html/'' (You can change this if you want to) |
- | - Set Accessible to **Yes** | + | - Set **Accessible** to ''Yes'' |
- | - Extra Headers **Access-Control-Allow-Origin *** | + | - Set **Extra Headers** to ''Access-Control-Allow-Origin *'' |
- | - Click **Save** button | + | - Click the **Save** button |
- | - Do graceful restart \\ {{:litespeed_wiki:config:cors-1.png?|}}\\{{:litespeed_wiki:config:cors-2.png?|}} | + | - Do a graceful restart \\ {{:litespeed_wiki:config:cors-1.png?|}}\\{{:litespeed_wiki:config:cors-2.png?|}} |
- | ===== How to verify ===== | + | ===== How to Verify ===== |
====Before verification==== | ====Before verification==== | ||
- | we can check our response header include ''Access-Control-Allow-Origin *''. \\ {{:litespeed_wiki:config:cors-6.png?600|}} \\ | + | Check that our response header includes ''Access-Control-Allow-Origin *''. \\ {{:litespeed_wiki:config:cors-6.png?600|}} \\ |
==== Start verification==== | ==== Start verification==== | ||
- | Test CORS is [[https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl | not easy]], here we are going to use [[http://www.test-cors.org | Test-cors online tool]] to verify it with simple step.\\ | + | Testing CORS is [[https://stackoverflow.com/questions/12173990/how-can-you-debug-a-cors-request-with-curl | not easy]], here we are going to use [[http://www.test-cors.org | the Test-cors online tool]] to verify it with simple steps.\\ |
- | Tool shows like this, basically we need to enter in **HTTP Method** and Target **Remote URL** \\ {{:litespeed_wiki:config:cors-3.png?600|}}\\ | + | The tool looks like this. We need to enter the **HTTP Method** and Target **Remote URL** \\ {{:litespeed_wiki:config:cors-3.png?600|}}\\ |
- | * Send with default supported method, e.g. ''GET'': \\ {{:litespeed_wiki:config:cors-4.png?600|}} \\ | + | * **Send Request** with the default supported method, e.g. ''GET'': \\ {{:litespeed_wiki:config:cors-4.png?600|}} \\ |
- | * Send with default unsupported method, e.g. ''DELETE'': \\ {{:litespeed_wiki:config:cors-5.png?600|}} \\ | + | * **Send Request** with an unsupported method, e.g. ''DELETE'': \\ {{:litespeed_wiki:config:cors-5.png?600|}} \\ |
+ | * You can also copy the code from the testing tool to test on your own: \\ <code> | ||
+ | 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(); | ||
+ | </code> | ||
==== How to support more method ==== | ==== How to support more method ==== | ||
Default CORS support method: PUSH, GET and HEAD. What if I want to support **OPTIONS** and **DELETE**? \\ | Default CORS support method: PUSH, GET and HEAD. What if I want to support **OPTIONS** and **DELETE**? \\ | ||
- | === Method 1: Set from .htaccess === | + | === Method 1: Set from htaccess file=== |
You can simply append ''Header always set Access-Control-Allow-Methods: <nowiki>"GET,POST,OPTIONS,DELETE"</nowiki>'' to .htaccess file | You can simply append ''Header always set Access-Control-Allow-Methods: <nowiki>"GET,POST,OPTIONS,DELETE"</nowiki>'' to .htaccess file | ||
=== Method 2: Set from config=== | === Method 2: Set from config=== | ||
- | You can simply append **Extra Header** ''Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE''. \\ {{:litespeed_wiki:config:cors-7.png?|}} \\ | + | You can simply append **Extra Headers** ''Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE''. \\ {{:litespeed_wiki:config:cors-7.png?|}} \\ |
Line 55: | Line 84: | ||
===== More Information ===== | ===== More Information ===== | ||
- | * More HTTP method and request please refer [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers | HTTP Headers]] | + | * More [[https://enable-cors.org/resources.html | CORS information]] |
- | * Learn more about CORS please refer [[https://enable-cors.org/resources.html | CORS information]] | + | * More [[https://www.ipragmatech.com/enable-cors-using-htaccess/ | CORS headers in htaccess]] |
+ | * More [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers | HTTP method and request]] | ||
+ | |||
+ |