Unable to make third party API request
I am working on an Ionic 2 Application using a 3rd party API from the Oxford Dictionary . Their API requires app_id
both app_key
as an authentication step to work.
Here is a service that makes an GET
API request request
@Injectable()
export class OxfordVocabularyService {
private app_id: any;
private app_key: any;
private OxfordBaseRequestURL: any;
constructor(private http: Http) {
this.app_id = configuration.oxfordAPI.app_id;
this.app_key = configuration.oxfordAPI.app_key;
this.OxfordBaseRequestURL = configuration.oxfordAPI.requestURL;
}
public getWordIPA(word: String): Promise<any> {
let headers = new Headers({ 'Accept': 'application/json' });
headers.append('app_id', this.app_id);
headers.append('app_key', this.app_key);
let options = new RequestOptions({ headers: headers });
return this.http.get(this.OxfordBaseRequestURL + word + '/pronunciations', options).toPromise().then(response => {
console.log(response.json());
});
}
When the application runs a service call, it throws errors
More information about requesting in a browser:
API request works fine for Postman
I have attached app_id
and app_key
to request headers, so why do I get an error.
403 - Missing authentication options
Is it CORS related? Can you show me a way to set up the API correctly?
Update
Many thanks to @suraj and @ n00dl3, I solved the problem by adding a proxy in Ionic Configuration.
ionic.config.json
"proxies": [
{
"path": "/oxfordapi",
"proxyUrl": "https://od-api.oxforddictionaries.com/api/v1/entries/en"
}
]
And change the request path GET
to
this.http.get('oxfordapi/' + word + '/pronunciations', options)
source to share
It seems the Oxford dictionnaries API doesn't support CORS:
Occasionally preflight requests will give the error "No" Access-Control-Allow-Origin 'header is present on the requested resource. "
Unfortunately, we cannot support client-side application requests (including JavaScript, JScript, VBScript, Java Applets, ActionScript, etc.).
This is because our API does not currently support CORS requests due to the potential security implications of our server. Instead, we suggest that you make the request available to your server side application, and then send the API request from the server, not the client.
So, you need to create a proxy for the ionic service (this will not happen in a packaged iOS / Android app as there are no preprogrammed requests).
for creating ionic proxy see this answer
source to share
In case anyone is trying to connect to the Oxford API using Angular only, no Ionic, @ n00dl3's above solution works pretty much the same, but with an important change.
You need to configure angular-cli proxy (proxy.conf.json) like this:
{
"/oxfordapi": {
"target": "https://od-api.oxforddictionaries.com/api/v1/entries/en/",
"secure": true,
"changeOrigin": true,
"logLevel": "debug",
"headers": {
"Accept": "application/json",
"app_id": "YOUR APP ID",
"app_key": "YOUR APP KEY"
},
"pathRewrite": {"^/oxfordapi" : ""}
}
}
Then make an HTTP get request from somewhere in your Angular component like this:
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'posts',
templateUrl: './posts.component.html',
styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
word: string = "aardvark"
ngOnInit() {
this.getWord(this.word)
}
getWord(word) {
this.http.get('/oxfordapi/' + word)
.subscribe(response => {
console.log(response.json())
})
}
}
You should now see the dictionary entry for "aardvark" in the console. Then run the application using:
ng serve --proxy-config proxy.conf.json
source to share