'Rest Api - URL has been blocked by CORS policy ' How resolve this issue?

Ashwini Gunjal1
Kilo Contributor

I am beggineer in Servicenow Web Service. Currently I am trying to call service now rest api through angular web services. I always got response 401 status.  I am using OAuth  for authentication. it is work properly if I checked the response from POSTMANN.

Api : https://dev57394.service-now.com/api/now/table/incident?sysparm_limit=1

Response : 

 {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"https://dev57394.service-now.com/api/now/table/incident?sysparm_limit=10&sysparm_query_no_domain=false","headers":{"Authorization":"Bearer nf1JAOk5wSqpUBA-X3oiu4YVe1Qj_TP5KKje1tX8MgqYmhnQod9d6pgGyBtuK638scGwlcUmMQDiWRc1JRmePg","Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

Error in console : Access to XMLHttpRequest at 'https://dev57394.service-now.com/api/now/table/incident?sysparm_limit=10&sysparm_query_no_domain=false' from origin 'null' 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.

Angular Code:

<!DOCTYPE html>
<html>
<head>Test web service </head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-App = "myApp" >
<div ng-controller = "myController">
<h1>test </h1>
<p id = "data1" style="color:red;"></p>
<h1 id = "data2"></h1>
<h1 style="color:red;" >{{sucessResponse}}</h1>
<h2 style="color:red;"> "Error " : {{errorResponse}}</h2>

</div>

<script>

var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http){

$http({

method : "GET" ,
url : "https://dev57394.service-now.com/api/now/table/incident?sysparm_limit=1",

headers : {
"Authorization" : "Bearer 9lMdUwSkYAmRcAL6xS1-TSAqqUzTVqjJH1NM9_qJScHWQfBjcCKThH4EaommnFtUs_hsQzb_9iqrTbOarQZ4ig",  // this code is correct
"Content-type" : "application/json",
"Access-Control-Allow-Origin": "*"

}
}).then(function mySuccess(response){
$scope.sucessResponse = response;

}, function myError(response){

$scope.errorResponse = response;

});

});

</script>
</body>

Guys please let me know, is it issue from servicenow side or my side ? please help me to resolve this.find_real_file.png

 

 

 

5 REPLIES 5

Jace Benson
Mega Sage

It looks like you're trying to call it from localhost.  You will likely have to add a CORS rule to allow it.

https://docs.servicenow.com/bundle/geneva-servicenow-platform/page/integrate/inbound_rest/task/t_Def...

Hi jacebrnson,

Thank you for your reply!!

I went through your link. could you give me example? how to define CORES rule in my condition? Because I defined one CORES rule in my instance. 

find_real_file.png

Please correct me , what I did wrong here?

So the CORS rules expect a domain.

You can spin one up with something like https://www.npmjs.com/package/http-server

I assume you have nodejs, if so just `npm -g install http-server`

Then cd to the root of your angular directory and run `http-server .`

Now you should be able to hit, http://localhost:8080 and get your angular app

 

In Servicenow you're recent screenshot looks appropriate.  In your initial post it shows a localpath of C:\Users\... and that won't owrk for this.

Thank you !!

I will try it using server.