Angular-configuration

Support Operation and Testing
, ,
1

My name is pasindu, and I am currently working on an Angular application where I am integrating with Tyk Open Source to retrieve an API key. However, I am encountering an unknown error during this process. there any unique process to do that?

2

Hi,

it’s very difficult to diagnose an unknown error. Without more detail we won’t be able to help with it.

We don’t have documented process to integrate Tyk with Angular however anything that can make REST calls should be able to call a Tyk gateway

Cheers,
Pete

3

if i try to get access key directly from the tyk using angular will it work?

4

What access key would this be? As mentioned by my colleague, you can make API requests to the gateway. Maybe if you share what you’ve tried, we might be able to assist.

5

Access to XMLHttpRequest at ‘http://localhost:8080/tyk/keys/create’ from origin ‘http://localhost:4200’ 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. I got this error from this code makeApiCall() {
const apiUrl = ‘http://localhost:8080/tyk/keys/create’;

// Request headers
const headers = new HttpHeaders({
  'x-tyk-authorization': 'foo',
  'Content-Type': 'application/json',
});

const requestBody = {
  allowance: 1000,
  rate: 1000,
  per: 1,
  expires: -1,
  quota_max: -1,
  org_id: '1',
  quota_renews: 1449051461,
  quota_remaining: -1,
  quota_renewal_rate: 60,
  access_rights: {
    A1: {
      api_id: 'A1',
      api_name: 'findAllDishes',
      versions: ['Default'],
    },
  },
  meta_data: {},
};

this.http.post(apiUrl, requestBody, { headers }).subscribe(
  (response) => {
    console.log('API Response:', response);
  },
  (error) => {
    console.error('API Error:', error);
  }
);

}
}

6

The error you get is a browser security restriction based on CORS. The management API doesn’t return CORS-related headers in its response but you can workaround the issue by using a proxy API definition (in Tyk) with CORS enabled as mentioned in this post.

The other less secure alternative is to disable CORS on your browser since you are in development mode.