Problem fetching data from API

I am trying to do some testing with an API from the Cisco DNA Center in this sketchbook: DNA Center API demo / Rasmus E / Observable

But when I try to fetch the authentication token I get a error 401 - Unautorized from the server.
Looking at the chrome inspection window it seems like the headers I have specified in my fetch does not get sent to the server. Specificaly the Authorization header.

What am I missing to get this to work?

It’s a CORS problem, using the CORS proxy ‘fetchp’ it works DNA Center API demo / Tom Larkworthy / Observable

NOTE: fetchp will not work until the notebook containing fetchp is published and visible.
NOTE (2) : fetchp also has integrated BASIC AUTH if you don’t want your secrets in notebooks.

2 Likes

Hi Tom,

Thank you for the proxy it seems to work for testing towards the public server. If I want this to be run against an internal server client side that is not possible with fetchp right? As I understand it, it creates a function somewhere on the web to do the proxying?

Yes it won’t work in a private network, well, one day you will be able to run the webcode runtime locally but even then there are probably simpler solutions at that point (local cors proxy). At least we know what the issue is! , maybe you can ask the service provider to add CORS headers?

1 Like

I will try to pressure the vendor to add CORS headers on the API. Do you know any easy way to implement the CORS proxy client side? I am working on some script for a customer and if they want to use the code it should be easy to execute. I have tried with some of the chrome plugins but most of them did not work.

Maybe GitHub - Rob--W/cors-anywhere: CORS Anywhere is a NodeJS reverse proxy which adds CORS headers to the proxied request.

which has the example code:

export PORT=8080
export CORSANYWHERE_WHITELIST=https://example.com,http://example.com,http://example.com:8080
node server.js

Then you would use https://localhost:8080/ to tunnel requests locally. I also have heard of people using chrome plugins but I have not done it personally myself.

Longshot: note the other method for getting around CORS is to actually server everything off the same domain with a reverse proxy. Depending on your environment you might already have something looking like that (e.g. nginx).

Longershot: You can also disable CORS checking with a chrome flag but I would not recommend that unless you were running a dedicated chrome instance for something (e.g. a dashboard monitor)

1 Like

Hi Tom,

Again, thank you for your input.
I have done some testing with disabling the CORS checking in chrome and it works. But not a great solution.
If I understand you correct you say that I just need my file hosted within the same domain? So if the API endpoint is at dnac.domain.com and I have a webserver with the client scripts on web.domain.com. Will CORS then work?

sorry no, subdomains count as different domains (amazon web services - CORS and subdomains - do subdomains matter? - DevOps Stack Exchange)

1 Like

Your goal is to transport an access token to the notebook. You might also do the auth elsewhere or with another tool, and then ask the user to copy the token across (or pass it URL param) which is how federated logins work. Maybe they already have something like that e.g. a command like login tool. I have seen it at a few corporations but it’s not always well known.

Like I can do ‘gcloud auth print–acess-token’

1 Like

I think you lost me there.
I am connecting to an appliance box with some data collection on it. And I don’t have any way to modify the appliance.

Ok nevermind. Not relevant