JQuery ajax request bypasses worker

I have a rather basic worker that every time a request is made, it checks if it is a request to an api and if so adds the key to the header, but every request that I don’t need, ends up being handled by the worker except for the request that I do want which is the only request done via ajax.
Do workers not work with Ajax or am I doing something wrong?

Can you post your code and the exact path you configured for your worker?

But basically, if you have a worker which decides if the API is called or not, it most likely is a catch-all path, which will mean it will fire on every request.

1 Like

Code is
addEventListener(‘fetch’, event => {
event.respondWith(handleRequest(event.request))
})

/**

  • Fetch and log a request
  • @param {Request} request
    */
    async function handleRequest(request) {
    console.log(“Request at”, request.url);
    //if (request.url.indexOf(“mourits-lyrics.p.rapidapi.com”) != -1) {
    console.log(“Adding key to request.”);
    // Make the headers mutable by re-constructing the Request.
    request = new Request(request)
    request.headers.set(‘x-rapidapi-key’, ‘KEY_HERE’)
    //}
    return await fetch(request);
    }
    And the path used is mourits.xyz/ but the code doesn’t work in the preview either. It doesn’t even print the url when it is being requested.
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a request
 * @param {Request} request
 */
async function handleRequest(request) {
  console.log("Request at", request.url);
  //if (request.url.indexOf("mourits-lyrics.p.rapidapi.com") != -1) {
    console.log("Adding key to request.");
    // Make the headers mutable by re-constructing the Request.
    request = new Request(request)
    request.headers.set('x-rapidapi-key', 'KEY_HERE')
  //}
  return await fetch(request);
}

So that worker is mapped to /* then, right? That would mean it will fire on all requests. So what you experience is correct. What does not work then?

I presume this line is supposed to check if the request was for the host in question, right?

if (request.url.indexOf("mourits-lyrics.p.rapidapi.com") != -1)

That host however does not seem to be proxied, in fact the entire p.rapidapi.com domain is off Cloudflare. So requests going to http://mourits-lyrics.p.rapidapi.com will never fire the worker.

So I would have to write my own php script that forwards the request to that domain in order to add the key?

I dont think you can add the key via a PHP script either. You will probably have to rethink your approach. Unless you can bring that host under Cloudflare’s proxies as well, in which case this - or another work - will do the trick.

I suppose hiding my API key from the public appears to be harder than I had anticipated.

You could proxy all the requests through your own server and then add that key there but that depends on your setup and what exactl you want to achieve. An unproxied DNS record will never fire workers however.

But if I proxy the request and have the worker do its thing, the end user can just follow those exact steps and end up not even needing the key.
The only good solution that actually hides the key is to add it when a request to the api is being made, but we’ve already seen that that does not work.

I am not quite sure what you are trying to say by that. The approach I mentioned actually implements what you were initially trying to do, with the difference of the record actually being proxied.

rapidapi.com is your domain, right?