I've been trying to work on a project with angularJS and the bing search api's v7. However, whenever I make a http request to the provided URL ("https://api.cognitive.microsoft.com/bing/v7.0/news?") I get an error 403 response with error message: "Insufficient Authorization". I looked at the Microsoft docs and they said the error could be caused "if the subscription key has been disabled or has expired."
However, I just got this key today. It seems odd that it would have expired or already been deactivated. Not sure what could be going on here.
Relevant code is
var params = {
// Bing news search request parameters
"q": "query",
"count": "3",
"offset": "0",
"mkt": "en-us",
"safesearch": "Moderate"
};
$http({
method: 'GET',
url: "https://api.cognitive.microsoft.com/bing/v7.0/news?"+ $httpParamSerializer(params),
headers:{"Ocp-Apim-Subscription-Key":"my_subscription key"}
}).then(
function successCallback(response) {
console.log('success');
console.log(response);
}, function errorCallback(response) {
console.log('error');
console.log(response);
});
What could be causing this issue? If it's a problem with the API, are there any other good news-gathering API's available?
Why is "https://api.cognitive.microsoft.com/bing/v7.0/news" giving 403
- InsufficientAuthorization?
The v5.0 url works. The v7.0 simply won't. This seems to be Microsoft.
After all it is still in preview.
On either v5.0 or 7.0 /search works.
And for /trendingtopics you need to pass ?mkt= with en-US or zh-CN.
Do I need an azure account to access the API?
No, you do not need an Azure account. The API keys generated can be used in the API test from Microsoft(if available), in Postman or any other mechanism that makes the request for you.
https://api.cognitive.microsoft.com/bing/v7.0/news is a different end-point. It is meant for category news search: https://dev.cognitive.microsoft.com/docs/services/e5e22123c5d24f1081f63af1548defa1/operations/56f02400dbe2d91900c68553.
The https://api.cognitive.microsoft.com/bing/v7.0/news/search defined here: https://dev.cognitive.microsoft.com/docs/services/e5e22123c5d24f1081f63af1548defa1/operations/56b449fbcf5ff81038d15cdf is the correct end-point for getting news for a given query.
Both the endpoints work for their respective usecases - the one without "/search" for category news (optional "category" parameter) and one with "/search" for the intended usecase here.
Related
Maximum time my rest api fails and some times it works in chrome but it always works in firefox.
when calling api old data is coming in response.
Cors is also enabled with proper rule.
As per my observation it started happening after recent chrome update on 2nd sept,2017.
Technology used :- Java,Angularjs
Below is the error I get when api fails :-
XMLHttpRequest cannot load . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. The response had HTTP status code 403.
Get Api code :-
executeGet: function () {
var deferred = $q.defer();
$http({
url: REST_API.SERVICE_BASE_URL + encodeURI(this.restURI),
method: 'GET',
timeout: 2000,
cache: false,
headers: {'Content-Type': 'application/json'},
withCredentials: true,
}).then(function (response) {
deferred.resolve(response.data, response.status, response.headers, response.config);
$log.debug( 'URL - '+ url_called, response.data, response.status);
},function (response) {
deferred.reject(response.data, response.status, response.headers, response.config);
$log.debug( 'URL - '+ url_called, response.data, response.status);
});
return deferred.promise;
},
Thanks in advance.
Sadly it's impossible to help you from this description. It's nothing to do with being a REST API, and it seems likely that the Chrome vs Firefox thing is just a coincidence.
To find out the cause of this missing Access-Control-Allow-Origin you need to debug your application like you would anything else. This can be done in a few ways.
You can enable New Relic or Data Dog to try to catch errors and other debugging information in an intelligent form, you can use Papertrail, Logentries, etc to see a trail of logs, you can use Rollbar to see just exceptions being fired if that's a bit cheaper than New Relic.
It's very likely that some error is being triggered (validation, auth, something) which is making your application return early, and it's not triggering whatever layer handles CORS. I can't take any guesses at what that might be because you've just put "Java" and we dunno if its Spring, something else or custom.
Best of luck with your debugging!
I faced the same issue, where it was working via Chrome but not when accessing through AngularJS. I was using Spring boot on server side. The solution in my case was to enable Allowing CORS on the server side. In Spring you can enable using WebMvcConfigurer. WebMvcConfigurer enabling CORS
Install in Chrome the extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
and enable the cros origin resources
I am trying to make an Angular application consuming Foreign Exchange (forex) market API.
$http({
method: 'GET',
url: 'http://www.apilayer.net/api/live?access_key=[MY ACCESS KEY]'
}).then(function(response){
console.log(response);
})
I keep getting the following error when I look at the browser console.
Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
The weirdest part is that it used to work - I was able to retrieve JSON info from the API call without a problem, but it does not any more.
Is there anyone who can point me to a set of possible causes? Would appreciate it!
If you didn't change anything in your code (say, the path for the api) then it must be one of two thing:
The browser configuration has changed
The api provider has blocked cross domain request, you should contact him, maybe he require callback with jsonp ajax request
When I try to retrieve the Office365 Groups I'm member of using AngularJS HTTP Get. I always get a 400 - Bad Request error in Chrome. In IE I do get a result.
var endpoint = "https://graph.microsoft.com/v1.0/me/memberOf/$/microsoft.graph.group?$filter=groupTypes/any(a:a eq 'unified')";
this.$http.get(endpoint, {
headers: {
"Content-Type": "application/json;odata=verbose"
}
}).then(function (result) {
console.log(result);
}, function (error) {
console.log("error:" + error);
});
Looks like the quotes in the URL are replaced with %27 and the Microsoft Graph/OData doesn't support this. I'll get the following error back:
Collection open properties are not supported in this release.
The JoinedGroups resource isn't available in the Microsoft Graph anymore. Is there another way to retrieve to Groups I am member of? Or is there another way to do this in Angular?
You can use ListMemberOf to get members of a group. here is a reference how to call the endpoint:
https://graph.microsoft.io/docs/api-reference/v1.0/api/group_list_members
You can use any falvor of JS client library to request o365 api. there is no limitation of which library you use as you have a correct request to the endpoint.
You can also use the graph explorer to make sure that you have a right request before coding it in AngularJS.
Graph explorer url: https://graphexplorer2.azurewebsites.net/
Hope this helps.
Office 365 unified groups I’m member of: https://graph.microsoft.com/v1.0/me/memberOf/$/microsoft.graph.group?$filter=groupTypes/any(a:a%20eq%20'unified')
I am using brightcove for managing videos in my sample application. My sample application based on Play-Framework 2.3.x, Scala, Angular-JS. The problem is that, i am using Angular-JS for uploading videos to brightcove server using Brightcove apis. My Angular code as below:
$scope.uploadProcess= $upload.upload({
url: 'http://api.brightcove.com/services/post',
headers: {
'Content-Type': file.type
},
method: 'POST',
fields: {
"method": "create_video",
"params": {
"video": {
"name": filename,
"tags": [],
"shortDescription": filename,
"itemState": "ACTIVE"
},
-------------------------------------------
When i send the request, browser return following error on response.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.brightcove.com/services/post. This can be fixed by moving the resource to the same domain or enabling CORS.
From searching on Google i found some solutions like Call Play 2 REST API with AngularJS (CORS Problems). But nothing is worked. i am really stuck at that scenario, please provide the solution. Thanks in advance.
If you want to do these kind of requests from the browser, you need to make sure that CORS is enabled on the server.
Brightcove does not seem to have that enabled, at least that whats the error message states.
The easiest solution would probably be, that you post the file through your backend.
I am using Request Bin to post some data. In my controller, I have the following code:
$http.post('http://requestb.in/redacted', fooBar).
success(function(data) {
$scope.fooBarPostedSuccess = true;
}).
error(function(err) {
console.log("Error while posting to Request Bin");
console.log("Error Info : " + err);
});
This is triggered by means on a button on the UI. Now when this gets triggered, the data is not posted to Request Bin and I get this error:
XMLHttpRequest cannot load http://requestb.in/redacted.
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.
How do I post data to request bin through an AngularJS controller? Also, what does the above error mean?
EDIT : I wish to add here that I am using Node.js with AngularJS. Is this something to do with Node perhaps?
Ah yes... you are dealing with cross-domain scripting issues. This is not an AngularJS problem, but a browser security limitation and a VERY common friction point.
You cannot POST/PUT/DELETE to another domain (different from the one which is hosting -- localhost in your case) without doing some Cross-Origin Resource Sharing (CORS). You are limited to GET for a cross-domain HTTP request.
You have two options:
See if your API supports any cross-domain capabilities. This might be via CORS or it might be via an overloaded GET API or JSONP.
Proxy requests through your server. Since you are using Node.js, proxying REST through your server is extremely simple... you just need to set up a route handler (like /api/redacted) in your Node.js server and then make a new request to your actual API server with something like Restler (NPM package) and return the result back to your client.
Hope this helps!
EDIT:
Your API supports JSONP (Your API Docs). You should be able to use Angular's JSONP function to access your API's JSONP capabilities. (Angular.js JSONP docs).
Since you want to be able to POST to the service, you will need to use the second approach.
CORS allows both GET and POST
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://www.w3.org/TR/cors/
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
Now, that that's out of the way...
I too have found that angular's $http won't let me POST cross domain. I was suspicious about that though because I have jquery ajax calls in other projects that can post cross domain just fine. So, I swapped my $http POST with $.ajax POST and that worked.
// $http({
// url: url,
// method: "POST",
// data: data
// })
// .success(successCallback)
// .error(errorCallback)
// ole reliable
$.ajax({
type : "POST",
url : url,
data : data,
success : successCallback,
error : errorCallback,
cache : false,
dataType : 'json',
})
You can use PutsReq instead of RequestBin. PutsReq supports CORS.