【问题标题】:Angular and Lumen dont want to communicate via PUT RequestAngular 和 Lumen 不想通过 PUT 请求进行通信
【发布时间】:2018-10-15 01:19:44
【问题描述】:

我已经用 Lumen 构建了一个 Rest API 接口,应该用 Angular HTTP Requests 来解决这个问题。

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

我需要你的帮助。

博客信息服务:

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

【问题讨论】:

  • 你能把你的控制器代码和app/http/kernel.php的代码也放上来吗?
  • 没有app/http/Kernel.php
  • 它与jwt有关,您使用的是authMiddleware,它检查用户是否登录,如果没有返回403响应,也就是说您需要确保用户是登录并在请求标头中包含令牌
  • 但是为什么给 The Rest Server 一个 405 错误而没有 403?
  • 确保您输入的路径正确,最好使用邮递员尝试

标签: angular laravel routing lumen angular-httpclient


【解决方案1】:

尝试改变

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

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

【讨论】:

    【解决方案2】:

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

    【讨论】:

    • 我现在有一个可行的解决方案。我将在接下来的几天内发布解决方案:)
    • @Lars 能否请您发布您的解决方案并随时标记我,因为我正在努力解决它,使用 URLSearchParams 对数据进行编码,但它有一些我不知道如何解决的问题
    猜你喜欢
    • 2018-06-13
    • 2015-07-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-21
    • 1970-01-01
    • 2019-09-08
    • 1970-01-01
    相关资源
    最近更新 更多