How to handle the "Request with GET/HEAD method cannot have body problem" in Vuejs?

Question

I have a problem with checking some URLs and their status code. I have a php function

public function checkUrl(Request $request)
{
    $curl = curl_init($request->url);
    curl_setopt($curl, CURLOPT_NOBODY, true);
    curl_exec($curl);
    $code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);
    return $code;
}

And in Vue I call it like this

Object.keys(this.items).forEach(key => {
      let value = this.items[key];
      let checkUrl = value.url + this.usersearch;  
      fetch('/api/checkurl', {
            method: 'GET',
               headers: {
                   'Content-Type': 'application/json',                                                    
               },
            mode:'cors',
            cache:'default',
            body: JSON.stringify({url:checkUrl}),
     })

When I check them I get the Uncaught TypeError: Failed to construct 'Request': Request with GET/HEAD method cannot have body. With method POST works fine, but I need to get the URLs checked with GET method. If anyone has idea what am I doing wrong here, I would be very grateful.

Remove `body` from your data, and append your parameter in the query string of the URL instead. — CBroe, Jun 29 '22 at 12:22
Does this answer your question? [Setting query string using Fetch GET request](https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request) — CBroe, Jun 29 '22 at 12:22

karliwson · Accepted Answer · 2022-06-30T14:18:50.397

You are sending the url param in the body of a GET request, which is not allowed by the HTTP protocol. GET requests don’t have a body. Send it as an URL param instead:

Object.keys(this.items).forEach(key => {
      let value = this.items[key];
      let checkUrl = value.url + this.usersearch;
      let query = new URLSearchParams({
        url: checkUrl
      });
      fetch('/api/checkurl?' + query, {
            method: 'GET',
            mode:'cors',
            cache:'default'
     });
});

Also, make sure your backend route is configured for GET requests.

How to handle the "Request with GET/HEAD method cannot have body problem" in Vuejs?

1 Answers1