时间戳

首页 > 解决方案 > Angular 7.2 HttpClient 删除方法不起作用，改为发送 Options 方法

angular - Angular 7.2 HttpClient 删除方法不起作用，改为发送 Options 方法

问题描述

我正在与来自 Angular 7.2 组件的 Laravel API 进行交互，除了删除之外，所有方法都可以正常工作，我可以通过 Firefox 网络活动控制台看到，当触发该功能时，请求是使用 OPTIONS 方法发送的。

这是我的服务方法：

elimina( id:number ) {
return this._http.delete( this.apiFMX + '/users/' + id );}

在我的组件中：

eliminaElemento( id:number ) {
this.dataService.elimina( id ).subscribe();
this.ruta.navigateByUrl( '/fmx-listado' );}

但它不起作用，这里是控制台输出：

在此处输入图像描述

另外，我在 Laravel API 中添加了 Cors 中间件。此外，如果在 firefox 控制台中编辑请求，将 OPTIONS 更新为 DELETE 方法，它就可以工作。

有什么建议吗？

谢谢指教。

这是 Firefox 控制台的两个图像：

网络活动

如您所见，它仍然是 OPTIONS 方法（由浏览器发送），但是如果我编辑请求并将其重新发送到 DELETE 方法，它就可以工作了！

警告

触发事件时会显示此警告，我重复一遍，仅在 DELETE 方法中发生，PUT 和 GET 正常工作。

这是我的中间件：

  public function handle($request, Closure $next)
{
    return $next( $request )->header( 'Access-Control-Allow-Origin' , '*' )
      ->header( 'Access-Control-Allow-Methods' , 'POST, GET, OPTIONS, PUT, DELETE' )
      ->header( 'Access-Control-Allow-Headers' , '*' );
}

谢谢。

标签： angularlaravel-5httpclient

解决方案

这是 Http 规范，与 Angular 无关

解决方案（选择一个）

  1. 将您的域添加到Access-Control-Allow-Origin响应标头中

在此处输入图像描述

// your domain : 192.168.30.104 
Access-Control-Allow-Origin: http://192.168.30.104
  1. Angular 应用程序和 API 在同一个域上

问题的原因

CORS 中的预检请求

在 CORS 中，发送带有 OPTIONS 方法的预检请求，以便服务器可以响应是否可以接受发送带有这些参数的请求。

特别是，如果以下任何条件为真，则预检请求：

如果请求使用以下任何一种方法：

  • 放
  • 删除
  • 连接
  • 选项
  • 痕迹
  • 修补

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS#Preflighted_requests_in_CORS

推荐阅读