Cors (cross origin request sharing) in mule
- 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