Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:config:cors [2017/10/06 14:30]
Eric Leu [Enabling Cross-Origin Resource Sharing]
+++ litespeed_wiki:config:cors [2017/10/09 14:21]
Lisa Clarke [Method 2: Set from config]
@@ Line 1: / Line 1: @@
 ====== 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 =====
-==== Method 1: Set from .htaccess====
+==== Method 1: Set from htaccess file====
 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>
-  - 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?|}}
 ==== Method 2: Set from config====
 Navigate to **Web Admin > Configurations > Your Virtual Hosts > Context**:
-  - Click **Add** button
+  - Click the **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====
-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====
-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 show 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);
-==== How to support more method ====
+xhr.onload = function() {
-Default CORS support method: PUSH, GET and HEAD. What if I want to support **OPTIONS** and **DELETE**? \\
+  // Success code goes here.
-=== Method 1: Set from .htaccess ===
+};
-You can simply append ''Header always set Access-Control-Allow-Methods: <nowiki>"GET,POST,OPTIONS,DELETE"</nowiki>'' to .htaccess file
+xhr.onerror = function() {
+  // Error code goes here.
+};
+xhr.send();
+</code>
+==== How to support more methods ====
+By default, CORS supports the following methods: ''PUSH'', ''GET'' and ''HEAD''. What if you want to support ''OPTIONS'' and ''DELETE'', as well? \\
+=== Method 1: Set from htaccess file===
+You can simply append ''Header always set Access-Control-Allow-Methods: <nowiki>"GET,POST,OPTIONS,DELETE"</nowiki>'' to the ''.htaccess'' file
 === 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 to **Extra Headers**: ''Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE''. \\ {{:litespeed_wiki:config:cors-7.png?|}} \\
-You can try verification again with sending **DELETE** HTTP method. You will see 200 response. \\ {{:litespeed_wiki:config:cors-8.png?|}} \\
+If you try verification again with the ''DELETE'' HTTP method, you should see the 200 response. \\ {{:litespeed_wiki:config:cors-8.png?|}} \\
 ===== 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]]