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

时间:2018-05-04 14:05:23

标签: angular laravel routing lumen angular-httpclient

我已经使用Lumen构建了一个Rest API接口,应该使用Angular HTTP Requests进行寻址。

现在的问题是,如果我用PUT寻址路由/api/blog,我会得到一个不允许来自Lumen的405方法。我已经为CORS编写了一个middlware,它也允许包括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 Middleware:

<?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

2 个答案:

答案 0 :(得分:0)

尝试更改

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

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

答案 1 :(得分:0)

Lumen喜欢Laravel作弊与PUT / PATCH等请求。这些需要是带有额外POST变量的POST请求&#39; _method&#39;设置为请求类型(例如)PUT。