Cross Origin error in JavaScript | Scene7

Last updated on 27 Des 2022

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