Sitecore FXM and CORS

In this blog post I will give an overview about the great Sitecore Federated Experience Manager (FXM) application as what is it? how I can get benefit from it? and How I can setup an external site using my Sitecore site? In addition to that I will talk about a problem you may face when trying to configure an external site using FXM.

Image from connectivedx

What is FXM?

FXM is an application that give the capabilities that you have in a Sitecore site to be used for a non Sitecore site, following are some of the capabilities that you can have in your non-Sitecore site:

1. Track visitor interactions.
2. Generate analytics information 
3. Implement personalization rules
4. Create goals
5. Create events 
6. Implement content profiling
7. Implement rules for external site in the engagement plans 
8. Track traffic for external site in you Sitecore site experience analytics 

How I can use FXM to track external non-Sitecore site?

Setting up an external site using FXM is very easy, with a couple of clicks you can start using what ever you want from the list of capabilities listed in the previous section, all what you need to do is the following:

1. Login to Sitecore client and click on "Federated Experience Manager" on the launch pad.
2. On the top left corner you can see a blue button "Add External Website"
3. You just need to fill two fields, the name and website domain.
4. In tracking script section you can see a generated script, you need to copy this and include it in your external website.
5. Save and publish.

The script that you will include in your external non-Sitecore website will be responsible for the connection between the two sites, you will see a message that tell you if the beacon script can be seen by your Sitecore website or no, many conditions and configurations will be included in this area, like the protocol and the domains used .

After doing the above you will be able to start using the FXM functionalities and apply it to the external website, of course there is a special experience editor for the FXM that you can use on your external website.  

You may or may not :) got the idea that there will be a cross domain requested through the beacon scripts between the two sites, from here we can talk a little about a problem I faced when I tried to setup an FXM for one of our client external sites.

What is CORS?

CORS stands for "Cross origin resource sharing" , cross origin occur when a resource on a website with domain "A" as example access or request a resource from website or domain "B", so maybe you reference image from another domain which is an example for CORS.

Browsers restrict cross origin requests for security reasons, so some times you will face issues such as the following:

Redirect from 'http://local.site1/sitecore/api/ssc/Beacon/Service/beacon/trackPageV…' to 'http://local.site1/sitecore/api/ssc/Beacon/Service/beacon/trackPageV…' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://local.site2.com' is therefore not allowed access

When I tried to add an external website to sitecore FXM and after adding the beacon to the external site  I got the above error once I reload the external website,

Solving the CORS Issue?

First thing we tried is to add custom headers through locations section in the web.config to allow the CORS between our Sitecore site and the external site as following:

Now, we got a different error as following through network tab by the browser or using fiddler:

1. http://local.site1/sitecore/api/ssc/Beacon/Service/beacon/trackPageVisit/?contactId=11f7fd4ca53d415d80af08e1c24bf98c%7CTrue&sessionId=4erdebjzwy44axevwj0uxjuv&page=http%3A%2F%2Flocal.site2.com%2F&referrer=&rt=1500488759453                 301 Moved Permanently / Get
2. http://local.site1/sitecore/api/ssc/Beacon/Service/beacon/trackPageVisit/?contactId=11f7fd4ca53d415d80af08e1c24bf98c%7CTrue&sessionId=4erdebjzwy44axevwj0uxjuv&page=http%3A%2F%2Flocal.site2.com%2F&referrer=&rt=1500488759453                 301 Moved Permanently / Post
3. http://local.site1/sitecore/api/ssc/Beacon/Service/beacon/trackPageVisit?contactId=11f7fd4ca53d415d80af08e1c24bf98c%7CTrue&sessionId=4erdebjzwy44axevwj0uxjuv&page=http%3A%2F%2Flocal.site2.com%2F&referrer=&rt=150048875945               Status code 405 method not allowed, with a reponse message "The requested resource does not support http method 'GET'"

Digging deep into this we found that a rewrite rule causing an issue with the requests from the beacon, this rule removes the trialing slash from the end of the requested URL causing a wrong redirect, following is the rewrite rule causing the problem:

We still need this rule to remove the trailing slash so, we added a condition to exclude the requests that contains specifically "sitecore/api" from this behavior as following:

Hope this will help, if you have any additions or notes please add comments to this post.