Блог

У меня есть Laravel API, который теперь позволяет новому приложению Angular2, которое я создаю, иметь доступ к самому себе. Я получаю следующую ошибку:

 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3073' is therefore not allowed access. The response had HTTP status code 404.
  

Это меня немного смущает, поскольку у меня уже есть два приложения (одно также Angular2), которое нормально взаимодействует с API без каких-либо проблем. Я также создал промежуточное программное обеспечение CORS в API, которое предоставляет соответствующие заголовки для доступа к этим приложениям.

Промежуточное программное обеспечение CORS

 <?php
    namespace AppHttpMiddleware;

    use Closure;

    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    class CORS {
        public function handle($request, Closure $next) {
            header("Access-Control-Allow-Origin: *");

            $headers = [
                'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
                'Access-Control-Allow-Headers'=> 'Content-Type, X-Auth-Token, Origin'
            ];

            if($request->getMethod() == "OPTIONS") {
                // The client-side application can set only headers allowed in Access-Control-Allow-Headers
                return Response::make('OK', 200, $headers);
            }

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

Мое приложение Angular2 пытается вызвать мой API, используя этот код:

 import { Injectable } from "@angular/core";
import { Http, Headers, RequestOptions }  from "@angular/http";
import { Observable } from "rxjs";

@Injectable()
export class AuthService {
    constructor(private _http: Http) {

    }

    login(loginDetails):Observable {
        let body = JSON.stringify(loginDetails);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this._http.post('http://#####-brain.dev/api/v1', body, options)
            .map(res => res.json());
    }
}
  

Есть ли у кого-нибудь какие-либо советы относительно того, почему это конкретное приложение не получает заголовок заголовка Access-Control-Allow-Origin? Я установил точку останова в своем промежуточном программном обеспечении CORS, и она вообще не попадает в нее, что странно, поскольку она вызывает точно ту же конечную точку, что и мое другое приложение, и это работает нормально.

Я также заметил, что он не разрешает только запросы POST.

Редактировать: вот мой app/Http/Kernel.php файл в Laravel API:

 protected $routeMiddleware = [
        'auth'          => AppHttpMiddlewareAuthenticate::class,
        'auth.basic'    => IlluminateAuthMiddlewareAuthenticateWithBasicAuth::class,
        'guest'         => AppHttpMiddlewareRedirectIfAuthenticated::class,
        'cors'          => 'AppHttpMiddlewareCORS',
        'jwt.auth'      => TymonJWTAuthMiddlewareGetUserFromToken::class,
        'jwt.refresh'   => TymonJWTAuthMiddlewareRefreshToken::class
    ];
  

Спасибо!