AngularJs JsonP request to cross domain | Springboot RestAPI & BootStrap

In the past post, we had experiences with AngularJs CrossSite HTTP Requests. In the tutorial, JavaSampleApproach will show you how to use AngularJs JsonP Request without worrying about cross-domain issues.

Related posts:
AngularJs CrossSite HTTP Requests to SpringBoot RestAPIs
AngularJs Table display Data Objects from RestAPIs remote | SpringBoot & BootStrap
Jquery JsonP request to cross domain | Springboot RestAPI & BootStrap

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– AngularJS
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. AngularJs JsonP and SpringBoot

JSONP is a solution to resolve cross-domain issues which uses script tag instead XMLHttpRequest object.

With AngularJs, we can use it as below:

To support JSON-P with SpringBoot RestAPI, we use AbstractJsonpResponseBodyAdvice:

Returned result is a Javascript object, NOT Json:

angularjs jsonp to cross domain request with springboot restapi - response

III. Practice

We create 2 SpringBoot projects as below:

angularjs jsonp to cross domain request with springboot restapi - project structure

Steps to do:

– Implement AngularJs Front-end

  • Create SpringBoot project
  • Create Web Controller
  • Create index.html file
  • Implemnt AngularJs controller

– Implement SpringBoot Backend

  • Create SpringBoot project
  • Create data models
  • Implement RestApi
  • Configure JsonpResponse advice

– Run and check results

1. Implement AngularJs Front-end
1.1 Create SpringBoot project

Use SpringToolSuite to create a SpringBoot project SpringBootAngular with dependencies:

1.2 Create Web Controller

1.3 Create index.html file

1.4 Implemnt AngularJs controller

2. Implement SpringBoot Backend
2.1 Create SpringBoot project

Use SpringToolSuite to create a SpringBoot project SpringBootJsonPRestAPI with dependency:

2.2 Create data models

– Create Address model:

– Create Customer model:

2.3 Implement RestApi

2.4 Configure JsonpResponse advice

3. Run and check results

Run 2 above SpringBoot projects. -> Results:

angularjs jsonp to cross domain request with springboot restapi - results

angularjs jsonp to cross domain request with springboot restapi - request header

angularjs jsonp to cross domain request with springboot restapi - response

IV. Sourcecode

SpringBootAngular
SpringBootJsonpRestAPI

By grokonez | November 6, 2017.



Related Posts


1 thought on “AngularJs JsonP request to cross domain | Springboot RestAPI & BootStrap”

  1. Love your site. I am porting my skill set from basic VBA to XHR and onward to jQuery. Do you have any tutorials on how to interact / browser automation with XHR without mixing IE automations?

Got Something To Say:

Your email address will not be published. Required fields are marked *

*