带有 Angular 的 Lumen API，加载资源 HTTP 失败答案

【问题标题】：Lumen API with Angular, failed load resource HTTP带有 Angular 的 Lumen API，加载资源 HTTP 失败
【发布时间】：2019-01-25 20:16:31
【问题描述】：

我的 Angular HTTP 模块有问题，我有一个使用 Lumen 开发的后端 API（URL：http://localhost/api/public/），受不记名令牌保护，但是当我尝试在我的 Angular 应用程序中加载 JSON 响应时（URL：@ 987654322@)，我的控制台中有这条消息：

无法加载http://localhost/api/public/links：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:4200' 不允许访问。响应的 HTTP 状态代码为 401。

我的 API 参数为 401 未找到授权标头，402 未找到承载令牌，403 表示无效令牌。（当我的问题解决后，我将全部更改为 401 错误）

我发现这是 CORS 问题，所以我在我的 .htaccess 中添加了这些行：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

但我的控制台中仍然出现 401 错误，尽管我有一个 HTTP 拦截器，它在我的所有 HTTP 请求中添加了授权标头：

Failed to load http://localhost/api/public/links: Response for preflight has invalid HTTP status code 401.

当我用 Postman 测试我的 API 时，我没有遇到问题，这是我的代码：

HTTP 拦截器

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const req = request.clone({ setHeaders: { Authorization: 'Bearer test' } });

    return next.handle(req);
  }
}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

import { Link } from '../class/link';

@Injectable({
  providedIn: 'root'
})
export class LinkService {

  constructor(private http: HttpClient) {}

  private resourceUrl = 'http://localhost/api/public/links';

  getAll (): Observable<Link[]> {
    return this.http.get<Link[]>(this.resourceUrl).pipe(
      retry(3),
      catchError(this.handleError('getAll', []))
    );
  }

  private handleError<T> (operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      return of(result as T);
    };
  }
}

提前致谢！

【问题讨论】：

如果您在浏览器的开发人员工具 (F12) 网络选项卡中签入，您是否收到来自服务器的响应中的 Access-Control-Allow- 标头？您是否已将服务器配置为处理 OPTIONS 预检？
是的，我收到了 3 个标头 Access-Control-Allow-* :Access-Control-Allow-Headers: origin, x-requested-with, content-type Access-Control-Allow-Methods: PUT , GET, POST, DELETE, OPTIONS Access-Control-Allow-Origin: * Cache-Control: no-cache, private Connection: close Content-Length: 32 Content-Type: application/json Date: Sun, 19 Aug 2018 13:格林威治标准时间 46:34 服务器：Apache/2.4.29 (Win32) OpenSSL/1.1.0g PHP/7.2.3 X-Powered-By：PHP/7.2.3
啊，您可能需要将Authorization 添加到允许的标头列表中
还是同样的信息，我的 .htaccess 中有这两行： RewriteCond %{HTTP:Authorization} 。 RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
这不是 Angular 问题，您需要正确配置您的 Lumen 和服务器配置以允许预检通过，您可以更改您的问题标签。

标签： angular http request

【解决方案1】：

我终于找到了解决方案，这是添加到您的 Lumen 应用程序以支持 Angular 预检请求的中间件：

<?php

namespace App\Http\Middleware;

use Closure;

class CORS
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = ($request->isMethod('OPTIONS')) ? response()->json('', 200) : $next($request) ;

        $response->header('Access-Control-Allow-Credentials', 'true');
        $response->header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE');
        $response->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
        $response->header('Access-Control-Allow-Origin', '*');

        return $response;
    }
}

【讨论】：

【解决方案2】：

我也被困在这一次，但得到了有用的代码，只需按照步骤操作，您的问题就会得到解决 1) 转到您的应用程序->Http->Middleware 并创建一个名为 PreflightResponse.php 的文件并将以下代码添加到其中

    <?php

namespace App\Http\Middleware;

use Closure;

class PreflightResponse
{
    /**
    * Handle an incoming request.
    *
    * @param \Illuminate\Http\Request $request
    * @param \Closure $next
    * @return mixed
    */
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin'      => '*',
            'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
            'Access-Control-Allow-Credentials' => 'true',
            'Access-Control-Max-Age'           => '86400',
            'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
        ];

        if ($request->isMethod('OPTIONS'))

        {
            return response()->json('{"method":"OPTIONS"}', 200, $headers);
        }

        $response = $next($request);
        foreach($headers as $key => $value)
        {
            $response->header($key, $value);
        }

        return $response;
    }
}

2) 现在转到 bootstrap/app.php 并在注册中间件部分添加以下代码行。您的问题将得到解决..

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

享受:)

【讨论】：