使用 Axios 向 Laravel API 发出删除请求会引发错误，但在失眠时工作正常

Question

您好，我正在使用 create-react-app 创建一个 Web 应用程序，它使用在 laravel 5 中开发的端点。

当我使用 axios 向服务器发出删除请求时，出现此错误 Cross-Origin 请求被阻止：同源策略不允许读取位于 http://127.0.0.1:8000/api/carts/7?api_token={api_token} 的远程资源。（原因：未在 CORS header ‘Access-Control-Allow-Methods’ 中找到方法）然而，当我在 Insomnia（HTTP Rest 客户端）上发送相同的请求时，我没有收到任何错误。

这是反应代码

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

以下是 Laravel 5 中的端点，react 应用程序正在向

发出上述请求

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

这里是处理删除请求的方法(laravel)

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')]));

}

当然，API（后端）没有错误，因为请求在失眠时工作正常。此外，这两个应用程序（react 和 laravel）均由本地主机提供。

请帮忙

Answer 1

在 frontend/client 文件夹的 package.json 文件中尝试像这样添加代理

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

Answer 2

通过在 laravel 应用程序（API 提供程序）中添加 Laravel Cors 包解决了该问题。

以下是 link 至 Laravel Cors 包

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

使用 Axios 向 Laravel API 发出删除请求会引发错误，但在失眠时工作正常

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

laravel

reactjs

axios

laravel-api