JavaScript fetch: missing RapidAPI application key

Question

I'm learning how to use RapidAPI and I get the same problem. I'm trying to use Random Famous quotes with JavaScript fetch. I copy this code:

async componentDidMount() {
    await fetch("https://andruxnet-random-famous-quotes.p.rapidapi.com/?count=10&cat=movies", {
        "method": "POST",
        "headers": {
            "x-rapidapi-host": "andruxnet-random-famous-quotes.p.rapidapi.com",
            "x-rapidapi-key": "5d4682bb48msh8e662b997230c75p180ff3jsne9e95966eb37",
            "content-type": "application/x-www-form-urlencoded"
        },
        "body": {}
    })
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        console.log(err);
    });

And in the console this is the response:

body: ReadableStream { locked: false }

bodyUsed: false

headers: Headers {  }

ok: true

redirected: false

status: 200

statusText: "OK"

type: "cors"

url: "https://andruxnet-random-famous-quotes.p.rapidapi.com/?count=10&cat=movies"

The url leads to the error: "message": "Missing RapidAPI application key. Go to https://docs.rapidapi.com/docs/keys to learn how to get your API application key."

It seems that the api key is missing, but as I understand it is provided in fetch headers. Is this is a syntax mistake or something else I'm missing? Thanks in advance.

Have you looked at the *body* of that response? Works fine for me with those credentials (which you should now rotate...) Also the request seems weird, shouldn't it just be a GET (which also works fine for me)? — jonrsharpe, Apr 14 '20 at 09:16
I'm going through the body of the response and still unable to find these quotes. As for GET and POST, I'm still struggling to grasp the difference between the two, so maybe I should have used GET instead of POST and that's the problem? — Luksiuslukas2, Apr 14 '20 at 09:23
No, as I say both methods work for me in Postman. Those quotes *are* in the body. Read the fetch docs (e.g. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to see how to parse and access that JSON. — jonrsharpe, Apr 14 '20 at 09:24

score 1 · Answer 1 · answered Aug 26 '21 at 16:56

This code is working fine for me.

fetch("https://andruxnet-random-famous-quotes.p.rapidapi.com/?cat=movies&count=10", {
    "method": "POST",
    "headers": {
        "x-rapidapi-host": "andruxnet-random-famous-quotes.p.rapidapi.com",
        "x-rapidapi-key": "fdb84465dfmsh5c2245c197e72f7p1cf738jsnabb992bd3635"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

If it still does not work and the error persists, I recommend you rotate your API key or generate a new API key for you on RapidAPI Developer Dashboard as you have exposed your API key in your question.

JavaScript fetch: missing RapidAPI application key

1 Answers1