How to access Edge Management APIs from a custom client side application

[shambhuxkumar]

There is a requirement for us to obtain and render Apgee management Apis data on our Vue js application.

While calling Apigee Management APIs from our VueJS application. We encounter the following two issues.

• The call was failing with CORS error which we are not sure how to resolve it if we would like to use the client side scripting.
• With a browser workaround, we manage to resolve the CORS issue but when we tried to call the management API by providing OAuth token which we have generated through a “post” call but it was failing with 401 error.

• The same OAuth and the end point are working fine on POSTMAN.

To resolve this issue temporarily, we decided to create a proxy dedicated for the management APIs through Apigee edge .

We would like to understand why our first option didn’t work and are there any advise we can follow to implement first option.

We are not sure if the second option is recommended by Google because we are only passing the “API key” to access the management APIs.

Thanks in advance for your help.

[#2]

CORS issue you faced first is becuse the browser expects the CORS enabled.

The later option you tried is through a proxy. I would like to use the same. In the proxy you can enable the CORS and also add some security like api key verification or oauth which will add a layer of security to access the management api call.

[dchiesa1]

are you using Apigee SaaS? Are you using the builtin Identity provider? You've obtained a token via login.apigee.com ?

The management endpoint that I use sends back CORS headers, see here:

$curl -i -H "Authorization: Bearer $TOKEN" $mgmtserver/v1/o/$org

HTTP/1.1 200 OK
Access-Control-Allow-Headers: origin, x-requested-with, accept
Access-Control-Allow-Methods: GET, PUT, POST, DELETE
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3628800
Content-Type: application/json
Date: Wed, 20 Jan 2021 17:14:03 GMT
Server: Apigee LB
Vary: Accept-Encoding, User-Agent
Content-Length: 1298
Connection: keep-alive

Those Access-Control-XXX headers are CORS things. One problem may be, per MDN,

When responding to a credentialed request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

So it appears that the Apigee management server endpoint is not doing the right thing with the CORS headers. It is responding to a credentialed request with access-control-allow-origin: * . It's possible the browser is rejecting this (as it should do, according to the MDN documentation). This seems like a bug in Apigee. A workaround would be to create a proxy, as you have done.

We are not sure if the second option is recommended by Google because we are only passing the “API key” to access the management APIs.

I don't understand this part. In your other comments you used the word "token". Why would you be using an API key in the proxy model? Why would it be different? I'd recommend that you use the OAuth 2.0 token to connect with the Apigee management API endpoint.

[shambhuxkumar]

Thanks Dino for your reply. Just to clarify that we are using OAuth to connect to Apigee management API endpoint so please ignore "token" word.

[dchiesa1]

Just to clarify that we are using OAuth to connect to Apigee management API endpoint so please ignore "token" word.

I'm soryr, I'm till not clear. If you are using OAuth , then you are using tokens, right? But your statement says "ignore the token word."??

I recommend that you use an OAuth 2.0 token to connect with the Apigee management API endpoint. It's a better approach. You can get a token via the login.apigee.com endpoint.

Example

POST https://login.apigee.com/oauth/token
Authorization: Basic ZWRnZWNsaTplZGdlY2xpc2VjcmV0
content-type: application/x-www-form-urlencoded


grant_type=password&username=:apigee-user&password=:apigee-pw