Api and fetch function help in javascript?

#1 
window.addEventListener("load",() => {
    getAPI();

    async function getAPI() {
       
        const key="Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6IjI4YTMxOGY3LTAwMDAtYTFlYi03ZmExLTJjNzQzM2M2Y2NhNSJ9.eyJpc3MiOiJzdXBlcmNlbGwiLCJhdWQiOiJzdXBlcmNlbGw6Z2FtZWFwaSIsImp0aSI6IjRlZmFiMTY0LWYzMzEtNGQ4Yi1iZjIwLWYwYzhiYmM3Y2M3MCIsImlhdCI6MTU5NDk3NDQ3OSwic3ViIjoiZGV2ZWxvcGVyL2M1ZmQwNjdmLWZkMjMtN2NkNy0zNDM1LTBlN2ZmOTc4ODY4NyIsInNjb3BlcyI6WyJjbGFzaCJdLCJsaW1pdHMiOlt7InRpZXIiOiJkZXZlbG9wZXIvc2lsdmVyIiwidHlwZSI6InRocm90dGxpbmcifSx7ImNpZHJzIjpbIjEwNi4yMjMuMTgxLjY0Il0sInR5cGUiOiJjbGllbnQifV19.MQ8ZAygMyD4jy7rTzCyUQ9EMP2WdQF07fwVCofytKxliEFxGdRwdKLb0fVFtSnkVEv7bmvwV2NteCFD0UCxuGQ";

        const response = await fetch(`https://api.clashofclans.com/v1/players/%23P9YJ88LUP?authorization=${key}`,{
            method: 'GET',
            Accept: 'application/json',
            mode: "no-cors"
        });
        console.log(response)
        const data = await response.json();
        console.log(data)
    }
})

Hii, I want to fetch clash of clan player data but after executing this code I got some stupid error I could not figure out what is the cause. please help me.

ERRORS: “brain.js:14 Uncaught (in promise) SyntaxError: Unexpected end of input
at getAPI (brain.js:14)”

#2

Try moving that line under the function definition. The error may be due to you trying to call the function before you created it.

#3

Nope It does not work still show me same error .

#4

Did this locally. I get a 403 response from the service call which is a permissions issue. Is the key correct?

Request URL: https://api.clashofclans.com/v1/players/%23P9YJ88LUP?authorization=Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6IjI4YTMxOGY3LTAwMDAtYTFlYi03ZmExLTJjNzQzM2M2Y2NhNSJ9.eyJpc3MiOiJzdXBlcmNlbGwiLCJhdWQiOiJzdXBlcmNlbGw6Z2FtZWFwaSIsImp0aSI6IjRlZmFiMTY0LWYzMzEtNGQ4Yi1iZjIwLWYwYzhiYmM3Y2M3MCIsImlhdCI6MTU5NDk3NDQ3OSwic3ViIjoiZGV2ZWxvcGVyL2M1ZmQwNjdmLWZkMjMtN2NkNy0zNDM1LTBlN2ZmOTc4ODY4NyIsInNjb3BlcyI6WyJjbGFzaCJdLCJsaW1pdHMiOlt7InRpZXIiOiJkZXZlbG9wZXIvc2lsdmVyIiwidHlwZSI6InRocm90dGxpbmcifSx7ImNpZHJzIjpbIjEwNi4yMjMuMTgxLjY0Il0sInR5cGUiOiJjbGllbnQifV19.MQ8ZAygMyD4jy7rTzCyUQ9EMP2WdQF07fwVCofytKxliEFxGdRwdKLb0fVFtSnkVEv7bmvwV2NteCFD0UCxuGQ
Request Method: GET
Status Code: 403 
Remote Address: 52.201.60.53:443
Referrer Policy: no-referrer-when-downgrade
#5

Hii try this one

Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiIsImtpZCI6IjI4YTMxOGY3LTAwMDAtYTFlYi03ZmExLTJjNzQzM2M2Y2NhNSJ9.eyJpc3MiOiJzdXBlcmNlbGwiLCJhdWQiOiJzdXBlcmNlbGw6Z2FtZWFwaSIsImp0aSI6ImI2NmJiMGNjLTU0NGYtNDczMS04Y2IxLWY0MjE1NThlYzg1OSIsImlhdCI6MTU5NDk5NjI3NCwic3ViIjoiZGV2ZWxvcGVyL2M1ZmQwNjdmLWZkMjMtN2NkNy0zNDM1LTBlN2ZmOTc4ODY4NyIsInNjb3BlcyI6WyJjbGFzaCJdLCJsaW1pdHMiOlt7InRpZXIiOiJkZXZlbG9wZXIvc2lsdmVyIiwidHlwZSI6InRocm90dGxpbmcifSx7ImNpZHJzIjpbIjEzOS4xNjcuOTMuMTAyIl0sInR5cGUiOiJjbGllbnQifV19.oxEUW2RrlF-zr9kl2DQzi03IyEUWpkYIobJMYhalOAcnjjdzbUqPiCUcXH-Rx_HEhc_29y47kbEgL-8z8Q-OpQ
#6

Does not seem to like that one either. Are you familiar with using the browser’s dev console? Do you know what response you are getting?

#7

Annotation 2020-07-17 202845

Here is my getting response.

#8

OK so it looks like you are not getting the auth error I am, but you are getting an empty response body, which is likely the source of your error as that occurs on the line where you call

const data = await response.json();
#9

This looks like it might be relevant (see accepted solution). https://stackoverflow.com/questions/45696999/fetch-unexpected-end-of-input

#10

Answered you in the other thread, API is not for browsers, so will always just error

#11

Ok I understand the problem I request for a resource on a different origin that doesn’t return CORS headers. It return me an opaque response.
So what is the solution of this problem.

#12

@DanCouper Ohh I don’t read it Well thanks for help me.

1 Like