Api and fetch function help in javascript?

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)”

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

Nope It does not work still show me same error .

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

Hii try this one

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

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?

Annotation 2020-07-17 202845

Here is my getting response.

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();

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

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

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.

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

1 Like