Establish HTTP headers for accessing the Oxford API in an Angular 6 application

Question

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

public performAutocomplete(wordInput):any {  

  let headersOptions = {
    headers:{
      'Accept':  'application/json',
      'app_id': 'myid',
      "app_key": "mykey"
    } as any
  }

  this.wordTyped = wordInput.toLowerCase() ;
  let response = this._http.get('https://od-api.oxforddictionaries.com:443/api/v1/search/en/translations=es?q='+this.wordTyped, headersOptions);
  return response;

 }

I have experimented with different types of headers requests in order to set up the necessary authentication for the Oxford API, but the only result I am receiving is a 403 forbidden error!

Please provide guidance on what would be the correct approach

typescript header angular6

Answer 1

Answer №1

I made some modifications to your code by creating a header object and request options. Try importing the necessary http modules from angular as shown below:

import { Http, Response, RequestOptions, Headers } from '@angular/http';

After making these changes, your method should look something like this. Let me know if it works for you:

public autocomplete(w): any {
  const baseUrl = 'https://od-api.oxforddictionaries.com:443/api/v1/search/en/translations=es?q=';
  w = w.toLowerCase();

  const headers = new Headers();
  headers.append('Content-Type','application/json');
  headers.append('app_id','myId');
  headers.append('app_key','myKey');

  const options = new RequestOptions({ headers: headers });
  return this.http.get(baseUrl + w, options);
}

Answer 2

I made some modifications to your code by creating a header object and request options. Try importing the necessary http modules from angular as shown below:

import { Http, Response, RequestOptions, Headers } from '@angular/http';

After making these changes, your method should look something like this. Let me know if it works for you:

public autocomplete(w): any {
  const baseUrl = 'https://od-api.oxforddictionaries.com:443/api/v1/search/en/translations=es?q=';
  w = w.toLowerCase();

  const headers = new Headers();
  headers.append('Content-Type','application/json');
  headers.append('app_id','myId');
  headers.append('app_key','myKey');

  const options = new RequestOptions({ headers: headers });
  return this.http.get(baseUrl + w, options);
}

Establish HTTP headers for accessing the Oxford API in an Angular 6 application

Please provide guidance on what would be the correct approach

Answer №1

Similar questions

What are the steps to effectively implement the useEffect hook in React?

How to identify alterations in user input within Angular?

Create a variety of URL formats for various object cases

Error when attempting to add data into MongoDB using Node.JS: "The type 'string' cannot be assigned to type 'ObjectId | undefined'."

Unable to fake a fetch request using the 'fetch-mock-jest 1.5.1' library

I am experiencing an issue where my code is not iterating over the data in my

What is the best way to create a function that shifts a musical note up or down by one semitone?

Tips for adding a mat-error to a mat-input-field on-the-fly

Struggling with the Transition from Google Sign-In

Matching utility types and themes in Tailwind CSS

The rendering process in ag-grid is resulting in the service component initialized from an event to become null

Utilizing a library that solely enhances the functionality of the Array object

Session is not functioning properly as anticipated

Unlocking CORS on DIVSHOT: A Step-by-Step Guide

Mastering the incorporation of Context in React with Typescript

What sets apart the various download options for Typescript, such as npm, NuGet, and Marketplace?

Angular2: Ensuring Sequential Execution Line by Line - A Comprehensive Guide

Module or its corresponding type declarations not found in the specified location.ts(2307)

Is there a more effective way to implement a Custom Validator using .forEach?

The default value for the ReturnType<typeof setInterval> in both the browser and node environments