Angular 6的PUT请求的CORS问题

Question

在我的应用程序中，我已经成功发出了GET，POST和DELETE请求，但这是我的第一个PUT查询。我还检查了我的API是否可以直接从邮递员查询。

因此，它似乎与Angular有关，这是我的代码：

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'})
};

export class TournamentService {
  update(tournament: Tournament, tab: string): Observable<any> {
      const tournamentUrl = this.tournamentsUrl + tournament.slug;
      console.log(tournamentUrl); // URL is OK
      return this.http.put(tournamentUrl, tournament, httpOptions).pipe(
        catchError(this.handleError<any>('updateTournamentGeneral'))
      );
    }
  }

我收到CORS错误消息：

Failed to load https://api.kz-api.test/tournaments/fake-tournoi: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
Blocked current origin from receiving cross-site document at https://api.kz-api.test/tournaments/fake-tournoi with MIME type text/html.

但对于我来说，我明确要求MIME类型为 application/json

这是我在Lumen上API方面的中间件代码：

class CorsMiddleware
{
    public function handle($request, \Closure $next)
    {
        $headers = [
            'Content-type' => 'application/json;charset=UTF-8',
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Methods' => 'HEAD,GET,POST,PUT,PATCH,DELETE,OPTIONS',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age' => '86400',
            'Access-Control-Allow-Headers' => $request->header('Access-Control-Request-Headers')
        ];
        if ($request->isMethod('OPTIONS')) {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }
        $response = $next($request);
        foreach ($headers as $key => $value) {
            $response->headers->set($key, $value);
        }
        return $response;
    }
}

知道如何解决这个问题吗？

Answer 1

对我来说，我必须更改我的http请求，不要在请求的最后使用'/'，这个问题仅适用于PUT

return $http.put(config.apiUrl + '/cit/product/', product);

对此

return $http.put(config.apiUrl + '/cit/product', product);