Community

Cross-origin resource sharing for Bluemix APIs

Share this post:

The IBM Bluemix Platform-as-a-Service (based on Cloud Foundry) naturally supports applications that are composed of many independent services deployed to different hostnames. For each application (which can in turn act as a service API) that you push to Bluemix, the name you provide will be prepended to .mybluemix.net resulting in an address such as:

http://<strong>my-sample-app</strong>.mybluemix.net

If your cloud-native system of engagement follows the best practices of a microservices architecture you’ll probably have two or more subcomponents (services or APIs) that live on discrete hostnames. What if you have a decoupled JavaScript based front-end that needs to aggregate information from these other Bluemix apps? By default the browser will forbid access to other subdomains.

The solution is to take advantage of the standard HTTP headers that are available to control cross-origin resource sharing (CORS) on the Bluemix services that you wish to provide to JavaScript clients. To illustrate the problem and the solution, consider the simple Ajax application hosted on Bluemix here:

<a href="http://krook-service-consumer.mybluemix.net">http://<strong>krook-service-consumer</strong>.mybluemix.net</a>

Cross-origin resource sharing for Bluemix APIs proof of concept

If you click the red box, you’ll initiate an asynchronous HTTP call in JavaScript to a servlet on another Bluemix hostname:

<a href="http://krook-service-provider.mybluemix.net/non-cors-provider">http://<strong>krook-service-provider</strong>.mybluemix.net/<strong>non-cors-provider</strong></a>

The source of this servlet shows that no particular HTTP headers are set, thus the JavaScript client request can never reach it. However, if you click the blue box, you’ll initiate a call to a different servlet on that same Bluemix hostname:

<a href="http://krook-service-provider.mybluemix.net/cors-provider">http://<strong>krook-service-provider</strong>.mybluemix.net/<strong>cors-provider</strong></a>

This time the Ajax function will successfully consume data from the service, because the HTTP headers set by the service allow JavaScript clients from a different domain to access the servlet. In the example code below, the client application will have access to several read and write methods on the service when requested using asynchronous JavaScript.

response.setHeader(
  "Access-Control-Allow-Origin", 
  "http://krook-service-consumer.mybluemix.net"
);

response.setHeader(
  "Access-Control-Allow-Methods", 
  "POST, GET, DELETE, PUT"
);

response.setHeader(
  "Access-Control-Allow-Headers", 
  "X-Requested-With, Content-Type"
);

This sample illustrates basic use of the CORS headers. Please be sure to consider the security implications when allowing access to certain HTTP methods and client hostnames for your own Bluemix services. For example, if you replace the whitelist of accepted client hostnames with a wildcard “*” any JavaScript client can access your service.

There you have it; a simple way to build applications composed of several microservices on IBM Bluemix and access them from another JavaScript application that is hosted on a different domain (Bluemix or elsewhere). I used Java in this example, but the same standard Cross-origin resource sharing HTTP headers apply whether you’re using Ruby, Node.js, PHP, Python or any other runtime.

Add Comment
No Comments

Leave a Reply

Your email address will not be published.Required fields are marked *

More How-tos stories

IBM Cloud and VMware Resiliency: Your Cloud for Business

Raising IT to Today’s Business Challenges In business there has always been a drive to do more with less and the age of IT is a perfect example of this with automated systems and online purchasing. But, as IT has become more and more prolific in the way we live and do business, we have […]

Continue reading

5 Steps to Link your IaaS and PaaS Accounts

A couple of months ago, we released a way for you to streamline your IBM Cloud experience. Essentially, IaaS customers, who also have PaaS accounts, can now link IaaS and PaaS for an easy to navigate, single view of your accounts. When you merge your accounts, you only manage one invoice through one login giving you […]

Continue reading

Anomaly detection in mobile sensor data using Machine Learning

This blog post is an excerpt from our solution tutorial - "Gather, visualize, and analyze IoT data". The tutorial walks you through setting up an IoT device, gathering mobile sensor data in the Watson IoT Platform, exploring data and creating visualizations and then using advanced machine learning services to analyze data and detect anomalies in the historical data.

Continue reading