Issue
I am developing an HTML application, but receive the following error when I try to call images from Scene7:
XMLHttpRequest cannot load http://company.scene7.com/is/image/Company/image. Origin http://www.clientCompany.com is not allowed by Access-Control-Allow-Origin.
Use CORS (Cross-Origin-Resource-Sharing): http://enable-cors.org/server.html
For it to work, the company.scene7.com server must add the following header:
Access-Control-Allow-Origin: *
Since that option is not available for the Scene7 servers, you can use a ruleset to achieve the same effect:
Solution
<?xml version="1.0" encoding="UTF-8"?>
<ruleset>
<rule OnMatch="continue">
<expression>.a=pft</expression>
<header Name="Access-Control-Allow-Origin" Action="set">pft.company.com</header>
</rule>
<rule>
<expression>.a=www</expression>
<header Name="Access-Control-Allow-Origin" Action="set">www.company.com</header>
</rule>
<rule>
<expression>.a=dev</expression>
<header Name="Access-Control-Allow-Origin" Action="set">dev.company.com</header>
</rule>
</ruleset>
Note, there is no wildcard possible, so each environment (development, integration, production, and so on) requires a separate rule.
The ruleset matches up with a particular modifier and adds the Access-Control-Allow-Origin that matches that modifier. Below are example urls using the above defined rules:
http://s7d7.scene7.com/is/image/Company/temp1?.a=pft
http://s7d7.scene7.com/is/image/Company/temp1?.a=dev
http://s7d7.scene7.com/is/image/Company/temp1?.a=www