Angular和Lumen不想通过PUT请求进行通信

Question

我已经用Lumen构建了Rest API接口，应该通过Angular HTTP Requests来解决。

现在的问题是，如果我使用PUT解决路由/api/blog ，则会得到Lumen不允许的405方法。 我已经为CORS编写了一个中间件，它也允许使用方法，包括PUT。 我还将JWT用于客户端身份验证。

我需要你的帮助。

BlogInformationService：

import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {environment} from '../../environments/environment';
import {BlogInformation} from '../models/BlogInformation';

@Injectable()
export class BlogInformationService {
  private endPoint = environment.apiUrl + '/api/blog';

  constructor(private http: HttpClient) {
  }

  getAll() {
    return this.http.get<BlogInformation[]>(this.endPoint);
  }

  getByHash(hash: string) {
    return this.http.get<BlogInformation>(this.endPoint + '/' + hash);
  }

  create(blogInformation: BlogInformation) {
    return this.http.post(this.endPoint + '/add', blogInformation);
  }

  update(blogInformation: BlogInformation) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Authorization': localStorage.getItem('access_token')
      })
    };
    return this.http.put(this.endPoint, blogInformation, httpOptions);
  }

  delete(blogInformation: BlogInformation) {

  }
}

流明路由：

$router->group([
    "middleware" => [
        "authMiddleware",
        "secureBlogMiddleware"
    ]
], function ($router) {
    $router->post('/api/blog/add', ["uses" => "BlogController@addBlog"]);
    Route::put("/api/blog", "BlogController@editBlog");
});

Cors中间件：

<?php

namespace App\Http\Middleware;


class CorsMiddleware
{
    public function handle($request, \Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers'));
        $response->header('Access-Control-Allow-Method', 'POST, GET, OPTIONS, PUT, DELETE');
        $response->header('Access-Control-Allow-Origin', '*');
        return $response;
    }
}

中间件配置：

/*
|--------------------------------------------------------------------------
| Register Middleware
|--------------------------------------------------------------------------
|
| Next, we will register the middleware with the application. These can
| be global middleware that run before and after each request into a
| route or middleware that'll be assigned to some specific routes.
|
*/

$app->middleware([
    App\Http\Middleware\CorsMiddleware::class
]);

请求标头：

OPTIONS /api/blog HTTP/1.1
Host: localhost:8000
Connection: keep-alive
Access-Control-Request-Method: PUT
Origin: http://localhost:4200
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Access-Control-Request-Headers: authorization,content-type
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7

响应标题：

HTTP/1.0 405 Method Not Allowed
Host: localhost:8000
Date: Fri, 04 May 2018 14:06:23 +0000
Connection: close
X-Powered-By: PHP/7.2.4
Allow: GET, PUT
Cache-Control: no-cache, private
Date: Fri, 04 May 2018 14:06:23 GMT
Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Method: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Content-type: text/html; charset=UTF-8

Answer 1

尝试改变

Route::put("/api/blog", "BlogController@editBlog");

对于

$router->put("/api/blog", "BlogController@editBlog");

Answer 2

像Laravel这样的Lumen会通过PUT / PATCH等作弊。 这些需要是带有额外POST变量'_method'设置为请求类型（例如PUT）的POST请求。