Invalid Credentials error message with google custom search api - angularjs

Question

I am using google custom search api to search for images in angular.js project.
Here is my Code:
var photosPublic = $resource('https://www.googleapis.com/customsearch/v1',
{ key: '..........ZDtw95C0V98ne4S39SPFi68', cx: '..........75325342:1ttvll7gahc' },
{ searchType:'image' });
return {
search: function(query) {
var q = $q.defer();
photosPublic.get({
q: query
}, function(resp) {
q.resolve(resp);
}, function(err) {
console.log(err);
q.reject(err);
})
return q.promise;
}
}
If i enter url plus all credentials directly in browser it works perfectly fine. But when i include this in my project i receive following response:
{
"error": {
"errors": [
{
"domain": "global",
"reason": "authError",
"message": "Invalid Credentials",
"locationType": "header",
"location": "Authorization"
}
],
"code": 401,
"message": "Invalid Credentials"
}
}
What am i doing wrong?

Answer 1

i had the same issue and wanted to share my solution here because i stumbled here from google search.
the problem appears when you set some default authorization headers in request libraries like $resource or axios etc...
When you provide an Authorization header in the request you're sending to google custom search api the google server is trying to authorize you with this header and isn't even trying to authorize you with the given key and cx.
I don't know much about $resource (maybe someone else could add some code?) but i have a solution for axios:
import axios from 'axios'
export default {
url: 'https://www.googleapis.com/customsearch/v1',
http: axios.create(),
search(text) {
this.http.defaults.headers.common = {};
const key = process.env.GOOGLE_SEARCH_API_KEY
const cx = process.env.GOOGLE_SEARCH_SCOPE_ID
return this.http.get(this.url, {
params: {
q: text,
cx,
key
}
})
}
}
This creates an own axios instance for the search api and resets the headers. Plus: your global axios instance is not affected (perhaps your Auth headers is needed for the communication with your backend).