0

I have an API to get the data I have to put Authorization in header but it didn't work. Here is the image in postman

https://drive.google.com/open?id=18CY4uBc83u9AcN9Uu2SFXMjPgc4FPBzU

enter image description here

I have applied this question answer AngularJS Adding a header to the $http.get But it didn't work.

HTML:-

<button type="button" class="btn btn-primary btn-xs" ng-click="getApiData()">
  GET DATA
</button>

JS:-

$scope.getApiData = function(){
    $http({
      method  : 'GET',
      url     : 'http://api.getlokalapp.com/posts/7678/?format=json',
      headers : {
        'Content-Type'  : 'application/json',
        'Authorization' : '5ae5f64653ce85803b44b7b6f4d216c2dae02251'
      }
    })
    .then(function(response){
      console.log(response);
    });
  }

I want the output is response as it is shown in postman request but I am unable to get it please help me to get the data from the API.

Error message which I am getting is-

Access to XMLHttpRequest at 'http://api.getlokalapp.com/posts/7678/?format=json' from origin 'http://localhost:9000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

But I have integrated other APIs and there I didn't get any error.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Sandeep Mukherjee
  • 673
  • 1
  • 9
  • 17
  • This problem is from the API provider's side. You can't do anything except asking them to fix this and allow you to use their API, since it is blocked by CORS (Cross Origin) policy. – N3R4ZZuRR0 Sep 08 '19 at 15:41
  • Thanks @VermaJr. for your feedback and my code is correct if you see the gdrive link and my code do you think is there any bug for Authorization of the value – Sandeep Mukherjee Sep 08 '19 at 15:44
  • Your code looks fine. This problem is definitely from their side. Is their API available for public use? – N3R4ZZuRR0 Sep 08 '19 at 15:47
  • No this is for company api i have to check with my team – Sandeep Mukherjee Sep 08 '19 at 15:49
  • If it is not available for public use, then is a very normal error because the browser is blocking it as it usually allows a request in the same origin for security reasons. You just **cannot** access their API using JavaScript then. – N3R4ZZuRR0 Sep 08 '19 at 15:53
  • is it blocking your local requests or even when you deploy at server do they have whitelisting? – joyBlanks Sep 08 '19 at 16:59

1 Answers1

0

You can't fix this in your production code unless the API provider adds Access-Control-Allow-Origin header in their backend. In order to just check if your code is working and to see the results, in Windows, paste this command in Run (Windows + R) window.

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

And for Mac,

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

This will open a new Chrome instance which will grant you access to this API, bypassing browser security.

N3R4ZZuRR0
  • 2,400
  • 4
  • 18
  • 32