Making a delete request using Axios to Laravel API throws an error but works fine in insomnia

Question

Hi I am creating a web app using create-react-app which consumes endpoints developed in laravel 5.

When I make a Delete request using axios to the server, I get this error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8000/api/carts/7?api_token={api_token}. (Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’) Whereas, when I send the same request on Insomnia (HTTP Rest Client), I donot get any error.

Here is the react code

handleDelete = ( cartId ) => {
    const api_token = localStorage.getItem('jbs_user_api_token');

    console.log("Delete cart item: ", cartId);

    axios.delete(`carts/${cartId}?api_token=${api_token}`)
        .then( res => {
             console.log(res);
        })
       .catch( err => {
             console.log(err);
        });
    }

Following is the endpoint in Laravel 5, the react app is making the aforementioned request to

Route::resource('carts', 'API\CartAPIController');

Here is the method (laravel) that handles the delete request

public function destroy($id)
{
    $cart = $this->cartRepository->findWithoutFail($id);

    if (empty($cart)) {
        return $this->sendError('Cart not found');

    }

    $cart = $this->cartRepository->delete($id);

    return $this->sendResponse($cart, __('lang.deleted_successfully', ['operator' => __('lang.cart')]));

}

Definitely, there is no error on the API (Backend) since the request works fine in insomnia. Plus both the applications (react and laravel) are served from localhost.

Please help

Mojo · Accepted Answer · 2020-11-13 15:46:52Z

0

In your package.json file of frontend/client folder try to add proxy like this

  "name": "app_name",
  "proxy": "http://127.0.0.1:8000"

answered Nov 13, 2020 at 15:46

Mojo

5181 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ijlal Over a year ago

I tried adding "proxy": "127.0.0.1:8000", still getting the same error

Ijlal · Accepted Answer · 2020-11-26 14:21:42Z

0

The issue is resolved by adding Laravel Cors package in the laravel App (API Provider).

Following is the link to Laravel Cors pakage

https://github.com/fruitcake/laravel-cors

answered Nov 26, 2020 at 14:21

Ijlal

213 bronze badges

Collectives™ on Stack Overflow

Making a delete request using Axios to Laravel API throws an error but works fine in insomnia

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related