Using KOR Connect to hide API-Key, sends Error "Request failed with status code 401" when using API, what is wrong?

Viewed 29

I am trying to hide my API-Key in my React App for openweathermap without using backend. Instead I use KOR Connect

In Editor Webpack compiles succesfully, but on localhost in browser console it throws this Error:

Object { message: "Request failed with status code 401", <br/>
name: "AxiosError", code: "ERR_BAD_REQUEST",<br/> 
config: {…}, request: XMLHttpRequest, <br/>
response: {…}, stack: "" }<br/>
code: "ERR_BAD_REQUEST"<br/>
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }<br/>
message: "Request failed with status code 401"<br/>
name: "AxiosError"<br/>
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }<br/>
response: Object { data: {…}, status: 401, statusText: "Unauthorized", … }<br/>
​stack: ""<br/>
< prototype >: Object { constructor: AxiosError(message, code, config, request, response), <br/>toJSON: toJSON(), stack: "", … }

Here is the stackblitz of the whole app.
KOR gives you a code snippet you can alter for your purpose. I added it to stackblitz as Example.tsx

KOR gives you a link which replaces the usual url one can use in public. https://gwasteinerts.korconnect.io/openweathermap/

Can you help me make it work?

0 Answers
Related