Call Spring-Boot API from AngularJS

Question

I have an API running on Spring Boot and I want to access the data using http call from AngularJS. But it is giving me the error

XMLHttpRequest cannot load http://localhost:9000/transaction-service/transaction/query?id=800103209000150247301466600013. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I know it has something to do with the headers but I don't know how to do it.

I think this question was answered before: https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource — Benjamin Schüller, Sep 09 '17 at 08:44
I know about that answer..but i dont know to do it in my application — Gaurav Rohilla, Sep 09 '17 at 08:55

score 1 · Answer 1 · answered Sep 09 '17 at 08:50

You have violated the same origin policy restriction to deal with this in angularjs. You have two solutions JSON with padding (JSONP) and Cross-origin resource sharing (CORS) headers.

Let’s examine a sample JSONP request and response to see how it works in practice. First of all we need to invoke a JSONP request:

$http
  .jsonp('http://angularjs.org/greet.php?callback=JSON_CALLBACK', {
    params:{
      name:'World'
    }
  }).success(function (data) {
    $scope.greeting = data;
  });

Or setting the appropriate CORS headers to allow you to cross domain resource sharing. If you're using Apache :

put the following into your .htaccess file:

 Header set Access-Control-Allow-Origin "*"

If you don't have access to configure Apache, you can still send the header from a PHP script. It's a case of adding the following to your PHP scripts:

 <?php
 header("Access-Control-Allow-Origin: *");

Call Spring-Boot API from AngularJS

1 Answers1