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

Question

我的角度HTTP模块有问题，我有一个用Lumen（URL： http：// localhost / api / public / ）开发的后端API，使用了承载令牌保护，但是当我尝试在我的角度应用中加载JSON响应时（URL： http：// localhost：4200 / ），我在控制台中显示以下消息：

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

我用我的API来表示401，找不到授权标头，找不到402承载令牌，而403表示无效令牌。 （当我的问题得到解决时，我将更改为401错误）

我发现这是CORS问题，因此我在.htaccess添加了以下.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"

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

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);
    };
  }
}

提前致谢！

Answer 1

我终于找到了解决方案，这是添加到您的Lumen App中以支持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;
    }
}

Answer 2

我也曾一度陷入困境，但得到了有用的代码，只需按照以下步骤操作，您的问题将得到解决1）转到您的应用程序-> Http->中间件，并创建一个名为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）现在转到bootstrapp / app.php，然后在“注册中间件”部分中添加以下代码行。 您的问题将得到解决。

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

请享用 ：）