Differences

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

Link to this comparison view

Both sides previous revision Previous revision
litespeed_wiki:config:cors [2017/10/09 14:21]
Lisa Clarke [Method 2: Set from config] 		litespeed_wiki:config:cors [2025/06/03 18:31] (current)
Lisa Clarke Redirect to new Documentation Site
Line 1: Line 1:
-====== Enabling Cross-Origin Resource Sharing ====== +~~REDIRECT>https://docs.litespeedtech.com/lsws/security-headers/#enable-cors~~
-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.  +
- +
- +
- +
- +
-===== How to Enable ===== +
-==== Method 1: Set from htaccess file==== +
-Navigate to **Web Admin > Configurations > Your Virtual Hosts > General > HT Access section**: +
-  - Click the **Edit** button +
-  - Enable ''​Limit'',​ ''​Auth'',​ ''​FileInfo'',​ ''​Indexes'',​ ''​Options''​ from **Allow Override** +
-  - Click the **Save** button +
-  - Do a graceful restart +
-Set CORS header to the ''​.htaccess''​ file of your Virtual Hosts location +
-  - 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?​|}} +
- +
- +
-==== Method 2: Set from config==== +
-Navigate to **Web Admin > Configurations > Your Virtual Hosts > Context**:​ +
-  - Click the **Add** button +
-  - Choose **Static** type +
-  - Set **URI** to ''/''​ (You can change this if you want to) +
-  - Set **Location** to ''​$SERVER_ROOT/​Example/​html/''​ (You can change this if you want to) +
-  - Set **Accessible** to ''​Yes''​ +
-  - Set **Extra Headers** to ''​Access-Control-Allow-Origin *''​ +
-  - Click the **Save** button +
-  - Do a graceful restart ​   \\ {{:​litespeed_wiki:​config:​cors-1.png?​|}}\\{{:​litespeed_wiki:​config:​cors-2.png?​|}} +
- +
- +
- +
- +
-===== How to Verify ===== +
-====Before verification==== +
-Check that our response header includes ''​Access-Control-Allow-Origin *''​. \\ {{:​litespeed_wiki:​config:​cors-6.png?​600|}} \\ +
-==== Start verification==== +
-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.\\ +
-The tool looks like this. We need to enter the **HTTP Method** and Target **Remote URL** \\ {{:​litespeed_wiki:​config:​cors-3.png?​600|}}\\ +
-  * **Send Request** with the default supported method, e.g. ''​GET'':​ \\ {{:​litespeed_wiki:​config:​cors-4.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 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 to **Extra Headers**: ''​Access-Control-Allow-Methods GET, POST, OPTIONS, DELETE''​. \\ {{:​litespeed_wiki:​config:​cors-7.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 [[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]] +
- +
- +
  • Admin
  • Last modified: 2025/06/03 18:31
  • by Lisa Clarke