Ionic 3 - Laravel - 不向客户端发送允许 CORS 的标头

Question

我有一个使用 Ionic 3 开发响应式 Web 应用程序的系统，以及作为 Rest API 的 Laravel。在本地服务器上它工作得很好，但是当我去部署应用程序时它出现了 CORS 错误。

我已经在 ionic.config.json 中定义了代理 [{"path", "proxyUrl"}]。为了将系统投入生产，我还需要进行任何其他更改吗？

我在 Apache 服务器上运行。

登录请求：

login() {
this.http.post<any>('http://www.example.com/api/login', this.user)
  .subscribe(data => {...})};

我的 Http 拦截器：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  let authRequest = req;
  const token = this.session.tokenGetter();
  if (token) {
    authRequest = req.clone({
      setHeaders: {
        'Access-Control-Allow-Origin': '*',
        'Authorization': `Bearer ${token}`
      }
    })
  }
  return next.handle(authRequest);
}

Laravel 中的路线：

Route::post('login', function (Request $request) {
  $data = $request->only('email', 'password');
  $token = \Auth::guard('api')->attempt($data);
  if (!$token) {
    return response()->json([
      'error' => 'Credentials invalid'
    ], 400);
  }
  return ['token' => $token];
});

Laravel 中的 CORS：

<?php
namespace App\Http\Middleware;
use Closure;
class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        if($request->is('api/*')){ //api/products /api/login
            header('Access-Control-Allow-Origin: *');
            header('Access-Control-Allow-Headers: Content-Type, Authorization');
        }
        return $next($request);
    }
}

Answer 1

这意味着您的服务器没有将允许 CORS 的标头发送回客户端：

1.Access-Control-Allow-Origin 2.Access-Control-Allow-Methods

创建新的中间件：

php artisan make:middleware Cors

在Cors.php

<?php // /app/Http/Middleware/Cors.php
namespace App\Http\Middleware;
use Closure;
class Cors {
    public function handle($request, Closure $next)
    {
        return $next($request)
          ->header('Access-Control-Allow-Origin', '*')
          ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

在Kernel.php

<?php // /app/Http/Kernel.php
protected $routeMiddleware = [
    'auth' => \App\Http\Middleware\Authenticate::class,
    'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
    'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
    'cors' => \App\Http\Middleware\Cors::class, // <<< add this line
];

在routes.php

<?php
Route::get('', ['middleware' => 'cors', function() {
    return 'You did it!';
}]);