How to create REST web service which returns JSONP data

We are using JSON as data format with RESTful services quite a lot in Oracle APEX. But, purpose of this blog is to see how we can create RESTful services in Oracle APEX which returns JSONP.

Problem Statement:

When you have your own custom widget which is consuming RESTful web service, and that custom widget is going to be used by any third party website or can be called from a web page with different domain name. We do get following or similar error message in such cases.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at {url}. This can be fixed by moving the resource to the same domain or enabling CORS.
Proposed Solution:

One of the solution is to have your JS code which is consuming RESTful services should get JSONP as a result. So, that will allow executing the cross-domain request without violating this error.

Following are few useful links I came across:

Click here to read more about JSONP.
Click here to read more about how to use JSONP
Click here to read more about $.getJSON()

Here is how you can create RESTful services which returns JSONP data in Oracle APEX.



Sample code:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  $.getJSON("https://apex.oracle.com/pls/apex/wstesting/demo/jsonp_demo?p_input=Jaydip&callback=?", function(data){
    alert(data);
  });
});
 
function CallbackFN(pMessage){
  alert(pMessage);
}
</script>
Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com

Comments

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery

Make your RESTful APIs Secured with OAuth2 - Basic, Simple and Easy Steps