CORS (Cross-Origin Request Sharing) in Mule

Here we will discuss how to enable Cross-Origin Request Sharing in Mule by adding outbound header properties.

The Same-Origin Policy

The same-origin policy is an important security concept implemented by web browsers to prevent JavaScript from making requests across domain boundaries (e.g., different domain) than the one from which it was served. It does not allow interactions between resources from different origins.

For example, your JavaScript code hosted at http://domain-a.com might want to use a REST API hosted at http://domain-b.com. However, because these are two different origins from the perspective of the browser, the browser won't allow a script from http://domain-a.com to fetch resources from http://domain-b.com, because the resource being fetched is from a different origin.

What Is a Cross-Origin Request?

If the script on your page is running from domain http://domain-a.com and would like to request a resource which is in another domain http://domain-b.com, this is a cross-origin request.These types of request is called Cross-Origin Request, For security reasons these types of requests have been prohibited by browsers.

CORS (Cross-Origin Request Sharing)

The solution of above issue is Cross-Origin Resource Sharing(CORS).CORS introduces a standard mechanism that can be used by all browsers for implementing cross-domain requests (Cross-Origin Request), allowing Javascript on a web page to consume a REST API served from a different origin.

The Cross-Origin Resource Sharing (CORS) mechanism gives web servers cross-domain access controls, which enable secure cross-domain data transfers.

How CORS Works

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. In its simplest form, the requesting application specifies an Origin header in the request, which describes the origin of the request, and the requested resource will reply intern with an Access-Contol-Allow-Origin header indicating specific origins that are allowed to access a particular resource.

This exchange of headers is what makes CORS a secure mechanism. The server must support CORS and indicate that the domain of the client making the request is permitted to do so. The beauty of this mechanism is that it is automatically handled by the browser and web application developers do not need to concern themselves with its details.

Request headers:

GET /awesomeapi/list HTTP/1.1

Host: myawesomeapp.com

User-Agent: Mozilla/5.0

Accept: */*

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Origin: http://myawesomeapp.com

Response headers:

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://myapp.com

Content-Type: application/json; charset=utf-8

Let’s walk through how to enable CORS in a Mule application.

We need to add the following outbound properties into the flow as shown below. The following properties are added to accept any origin, method and headers so that cross origin/domain requests can be allowed.

<set-property propertyName="Access-Control-Allow-Origin" value="*" doc:name="Access-Control-Allow-Origin" />
<set-property propertyName="Access-Control-Allow-Headers" value="*" doc:name="Access-Control-Allow-Headers"/>
<set-property propertyName="Access-Control-Allow-Methods" value="*" doc:name="Access-Control-Allow-Methods" />

This enables Mule flows to accept cross domain requests.

Mule Flow:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<mule xmlns:http="http://www.mulesoft.org/schema/mule/http" xmlns="http://www.mulesoft.org/schema/mule/core" xmlns:doc="http://www.mulesoft.org/schema/mule/documentation"
    xmlns:spring="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-current.xsd
http://www.mulesoft.org/schema/mule/core http://www.mulesoft.org/schema/mule/core/current/mule.xsd
http://www.mulesoft.org/schema/mule/http http://www.mulesoft.org/schema/mule/http/current/mule-http.xsd">
    <http:listener-config name="HTTP_Listener_Configuration" host="0.0.0.0" port="8081" basePath="/cors" doc:name="HTTP Listener Configuration"/>
    <flow name="corsFlow">
        <http:listener config-ref="HTTP_Listener_Configuration" path="/cors" doc:name="HTTP"/>
        <set-payload value="Enabling cross domain requests in Mule using HTTP Headers"/>
        <set-property propertyName="Access-Control-Allow-Origin" value="*" doc:name="Property" />
        <set-property propertyName="Access-Control-Allow-Headers" value="Content-Type, Accept" doc:name="Property" mimeType="application/json"/>
        <set-property propertyName="Access-Control-Allow-Methods" value="*" doc:name="Property" />   
    </flow>
</mule>

Request:

http://localhost:8081/cors/cors

Below is the screenshot of the response headers as part of the response.

Hope this helps.

Thanks.