Restful API call from JavaScript
Lets have a simple example of mule api calling from javascript client.
Mule API:
In mule api we need to put below three properties in property files.
<set-property propertyName="Access-Control-Allow-Origin" value="*" doc:name="Property"/>
<set-property propertyName="Access-Control-Allow-Methods" value="*" doc:name="Property"/>
<set-property propertyName="Access-Control-Allow-Headers" value="*" doc:name="Property"/>
Javascript client:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "http://localhost:8085/api/jsclient", true);
xhttp.send();
</script>
</body>
</html>
Mule api url: http://localhost:8085/api/jsclient
method: GET
Output : Mule API called from javascript client
Mule project 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="8085" basePath="/api" doc:name="HTTP Listener Configuration"/>
<flow name="test_javascriptclientFlow">
<http:listener config-ref="HTTP_Listener_Configuration" path="/jsclient" doc:name="HTTP"/>
<set-property propertyName="Access-Control-Allow-Origin" value="*" doc:name="Property"/>
<set-property propertyName="Access-Control-Allow-Methods" value="*" doc:name="Property"/>
<set-property propertyName="Access-Control-Allow-Headers" value="*" doc:name="Property"/>
<set-payload value="Mule API called from javascript client" doc:name="Set Payload"/>
</flow>
</mule>
