Learn what a Cross-Origin Request is, how it works, and how to enable CORS sharing in Mule, enabling secure cross-domain data transfers.

1. Ankit Lawaniya
9/3/2017 Ankit Lawaniya 1

2.  Here we will discuss how to enable Cross-
Origin Request Sharing in Mule by adding
outbound header properties.
9/3/2017 Ankit Lawaniya 2

3. 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.
9/3/2017 Ankit Lawaniya 3

4. 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.
9/3/2017 Ankit Lawaniya 4

5. 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.
9/3/2017 Ankit Lawaniya 5

6. 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.
9/3/2017 Ankit Lawaniya 6

7. 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
9/3/2017 Ankit Lawaniya 7

8. HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://myapp.com
Content-Type: application/json; charset=utf-8
9/3/2017 Ankit Lawaniya 8

9. 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" />
9/3/2017 Ankit Lawaniya 9

10. 9/3/2017 Ankit Lawaniya 10

11. 9/3/2017 Ankit Lawaniya 11

12. Request:
http://localhost:8081/cors/cors
Below is the screenshot of the response headers as part of the
response.
9/3/2017 Ankit Lawaniya 12

13. 9/3/2017 Ankit Lawaniya 13