Here we will discuss how to enable Cross-Origin Request Sharing in Mule by adding outbound header properties.
The Same-Origin Policy
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 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.
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
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.
<?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>
Below is the screenshot of the response headers as part of the response.
Hope this helps.