Enabling Cross-Origin Resource Sharing for HTML5 Uploader

Supported technologies: HTML 5
Important

This article is applicable to HTML5 Uploader only. For similar information about the Flash Uploader see the Using Host and Upload Domains that Differ from One Another topic.

Usually a client-side script is not allowed accessing data that resides outside a domain where the script is hosted. It means that you usually cannot host HTML5 Uploader on one domain and upload files to another. However, you can manage this task by enabling Cross-Origin Resource Sharing (CORS).

To grant client scripts basic access to your resources simply add one HTTP Response Header:

Access-Control-Allow-Origin: *

The asterisk permits scripts hosted on any site to load your resources.

To permit scripts hosted on only a specific site to load your resources use an origin (protocol+domain+optional port):

Access-Control-Allow-Origin: http://example.com:8080

You can enable CORS by configuring server settings or by configuring HTTP response header from your script.

Configuring Server

For Apache

Apache can be configured to expose this header using mod_headers, this is enabled by default in Apache however you may want to ensure it is enabled by running the following command: a2enmod headers

To expose the header you simply add the following line inside <Directory>, <Location>, <Files> or <VirtualHost> sections, or within a .htaccess file:

Header set Access-Control-Allow-Origin *

"*" means that CORS will be enabled for any domain name. If you need to use an exact name please specify it instead of "*".

Note

You can use add instead of set, but be aware that add can add the header multiple times, so it is safer to use set. Eventually, you may need to reload Apache to make sure your changes are applied.

For IIS6

Perform the following steps:

  1. Open Internet Information Service (IIS) Manager
  2. Right-click the site you want to enable CORS for and go to Properties
  3. Change to the HTTP Headers tab
  4. In the Custom HTTP headers section, click Add
  5. Enter Access-Control-Allow-Origin as the header name
  6. Enter * as the header value
  7. Click Ok twice

"*" means that CORS will be enabled for any domain name. If you need to use an exact name please specify it instead of "*".

For IIS7

For Microsoft IIS7, merge this into the web.config file at the root of your application or site:

XML
<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

"*" means that CORS will be enabled for any domain name. If you need to use an exact name please specify it instead of "*".

Note

If you do not have a web.config file already, or do not know what one is, just create a new file called web.config containing the snippet above.

Configuring Header

If you do not have access to configure your web server, you can still send the header from your script.

In PHP

Add the following code to your PHP scripts:

PHP
<?php
header("Access-Control-Allow-Origin: *");
...
?>

"*" means that CORS will be enabled for any domain name. If you need to use an exact name please specify it instead of "*".

Note

As with all uses of the PHP header function, this must be before any output has been sent from the server.

In ASP.NET

Add the following line to your source code:

C#
Response.AppendHeader("Access-Control-Allow-Origin", "*");

"*" means that CORS will be enabled for any domain name. If you need to use an exact name please specify it instead of "*".

Note

This approach is compatible with IIS6, IIS7 Classic Mode, and IIS7 Integrated Mode.