Enabling CORS for WebSphere Commerce REST

Commerce-CORSI have two servers, one application server (JSP based) and one WebSphere Commerce server. I want to be able to call the REST API’s on the Commerce server via JavaScript served up by the application server. So my JavaScript would look like this:

$.ajax({
      url: myCommerceServerRestURL,
      method: "GET",
      crossDomain: true,
      contentType: "application/json",
      dataType: "json"
 })

The problem is, if CORS is not enabled on the WebSphere Commerce server you will receive the infamous No ‘Access-Control-Allow-Origin’ header is present on the requested resource. And the call fails.

Now WebSphere Commerce can be a little tricky if your server has a web server in front of it. You essentially have to enable it in both places – or at least that is what I had to do. If I only had to do one of these please let me know – I got tired of testing the different tips from the netverse.

I have IHS in front of WebSphere Commerce, so, after hours of playing around with different configurations I came up with these steps:

First configure httpd.conf in the IHS/conf directory and add these lines  if you want all domains to be able to access your data:

 <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
        Header set Access-Control-Allow-Methods "GET, PUT, OPTIONS"
        Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
 </IfModule>

Remember, you can always override the Access-Control-Origin with a domain or multiple domains to prevent access for everyone.

Next, you have to update the WebSphere Commerce server. You can actually see the Commerce Insights enabling documentation for this (my colleague pointed me to this, thanks J).  You will be editing the WC configuration file and the WC Search configuration file.

 <_config:configgrouping name="HttpSecuritySettings_Rest">
          <_config:property name="CORSAccessControlAllowOrigin" value="*"/>
          <_config:property name="CORSAccessControlAllowMethods" value="GET, HEAD, POST, OPTIONS, PUT, DELETE"/>
          <_config:property name="CORSAccessControlAllowCredentials" value="true"/>
          <_config:property name="CORSAccessControlAllowHeaders" value="Origin,X-Requested-With,Content-Type,Accept,Authorization,cache-control,expires,pragma,wclogonid,wctoken,wctrustedtoken,wcuserid,X-RequestId"/>
          <_config:property name="CORSAccessControlExposeHeaders" value="Access-Control-Allow-Headers"/>
          <_config:property name="CORSAccessControlMaxAge" value="3600"/> 
 </_config:configgrouping>

 

If you found this useful follow this site! I also have a YouTube channel for IBM Commerce.

Advertisements

Base JavaScript versus jQuery example – Driving a DOM selector

One of the things a good web programmer should be able to do is write code using multiple libraries. In this case I have created two snippets that show how to select an HTML on a page using both bare-bones JavaScript and its corollary in jQuery.

The basic flow is:

MouseEnter Listener -> Modify border -> Click Listener -> Call Function

MouseOut Listener -> Restore border

This gives you an interface where you can then select a DOM element right from the web page. It would look like this:

web-selection

Here are the two different implementations, you can see why I love jQuery, its brevity is breathtaking. The biggest difference is the selector API in jQuery that does the loop processing for you.

Base JavaScript

[codesyntax lang=”javascript”]

var all_1_Links = document.getElementsByTagName('div');
for (var i = 0; i < all_1_Links.length; i++) {
    var elm = all_1_Links[i];
    elm.addEventListener('mouseenter', function() {
        this.addEventListener('click', clickListener, true);
        this.style.oldborder = this.style.border;
        this.style.border = 'thin solid red';
    });
    elm.addEventListener('mouseout', function() {
        this.style.border = this.style.oldborder;
    });
}

[/codesyntax]

 

jQuery Version

[codesyntax lang=”javascript”]

$("div").mouseenter(function(e) {
    e.target.oldborder = e.target.style.border;
    $(e.target).css("border", "thin solid red"); 
    $(e.target).click(clickListener); 
}); 
$("div").mouseout(function(e) { 
    $(e.target).css("border", e.target.style.oldborder); 
    $(e.target).off("click"); 
});

[/codesyntax]

 

Getting and setting check boxes with jQuery

Getting and setting check boxes in jQuery is a lot easier than setting radio buttons and we can thank the “prop” function for that.

Here is the HTML, notice each check box has its own Id, that is the key so the jQuery selector can get at the “checked” property:

Screen Shot 2013-11-25 at 10.46.49 PM

Getting the value is a single line call and it can be stored in a boolean:

pillar_buy = $('#screen_pillar_buy').prop( "checked");

Setting is just as easy:

$('#screen_pillar_buy').prop( "checked", pillar_buy );