ArgoCD API from localhost

[amber palm]

Hello, I am new to plugin development and trying to setup locally. Apologies if this has been asked before (tried searching but can't find specific example) Initially I tried to fetch from ArgoCD API directly adding Bearer token to the fetch header. I got the horrible CORS error and now trying to create proxy entry.
In my app-config.yml I have the following:
proxy:

Example for how to add a proxy endpoint for the frontend.

A typical reason to do this is to handle HTTPS and CORS for internal services.

endpoints:

'/test':

target: 'https://example.com'

changeOrigin: true

'/argocd': 
    target: https://argocd.xyz.com/api/vi
    headers:
        Authorization: Bearer xxx
    changeOrigin: true
    secure: false

In the component I have the following:
const backendUrl = 'https://localhost:3000'

const request: RequestInfo = new Request(`${backendUrl}/api/proxy/applications/xyz/resource-tree`, {
    method: 'GET',
}) 
  return fetch(request)
// the JSON body is taken from the response
.then(res => res.json())

I am getting a net::ERR_SSL_PROTOCOL_ERROR.
Any help would be greatly appreciated. Thank you!

Note: Not trying to use the existing ArgoCD plugin, trying to create a new plugin displaying info from ArgoCD API.

[stray jetty]

I somewhat doubt you're running localhost on https. Ideally, you would get the backend url for the proxy plugin dynamically. You can see an example in this tutorial https://backstage.io/docs/tutorials/using-backstage-proxy-within-plugin/

the recommended way is to create your own api/client in the frontend, so in your component you can do something like const argocd = useApi(argocdApiRef); and then use that

[amber palm]

thank you for your quick response. I looked at the documentation you provided and I found and updated the backend url to the below. Now I am just getting a 401 unauthorized. Any feedback you can provide would be very helpful. I have been looking at this link: https://backstage.io/docs/plugins/call-existing-api#using-the-backstage-proxy
app:

Should be the same as backend.baseUrl when using the app-backend plugin.

baseUrl: http://localhost:7007

backend:

Note that the baseUrl should be the URL that the browser and other clients

should use when communicating with the backend, i.e. it needs to be

reachable not just from within the backend host, but from all of your

callers. When its value is "http://localhost:7007", it's strictly private

and can't be reached by others.

baseUrl: http://localhost:7007

[amber palm]

Additional Info:
1] 2024-07-26T14:15:56.969Z proxy info [HPM] Proxy created: /argocd -> https://argocd.xyz.com/api/v1
[1] 2024-07-26T14:15:56.969Z proxy info [HPM] Proxy rewrite rule created: "^/api/proxy/argocd/?" ~> "/"
[0] webpack compiled successfully

1] 2024-07-26T14:22:47.387Z rootHttpRouter info ::1 - - [26/Jul/2024:14:22:47 +0000] "GET /api/proxy/applications/service-prod/resource-tree HTTP/1.1" 401 517 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36" type=incomingRequest

[stray jetty]

you'll want to include argocd/ in the url, so something like ${proxyUrl}/argocd/applications/service-prod/resource-tree should do the trick

(i.e. /api/proxy/argocd points at argocd.zyw.com/api/v1, but you're requesting /api/proxy/applications which doesn't point anywhere)

[amber palm]

thank you! I changed to const request: RequestInfo = new Request(${backendUrl}/api/proxy/argocd/applications/service-prod/resource-tree
and still got the 401

backendUrl is 'http://localhost:7007'

[1] 2024-07-26T15:05:46.316Z rootHttpRouter info ::1 - - [26/Jul/2024:15:05:46 +0000] "GET /api/proxy/argocd/applications/service-prod/resource-tree HTTP/1.1" 401 524 "http://localhost:3000/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36" type=incomingRequest

Looks like missing credentials:
{
"error": {
"name": "AuthenticationError",
"message": "Missing credentials",

"request": {
    "method": "GET",
    "url": "/api/proxy/argocd/applications/service-prod/resource-tree"
},
"response": {
    "statusCode": 401
}

}

[amber palm]

it is working now! thank you for your help!

[stray jetty]

Great! What did you end up changing? I'm guessing perhaps you were going directly to that URL in the browser rather than calling it from a frontend plugin?

[amber palm]

it was this: credentials: dangerously-allow-unauthenticated