Angular 2 Failed to load Response for preflight is invalid (redirect)

Question

I am using Angular 2 with a Laravel PHP Framework for my API. My Angular 2 project is running on http://localhost:4200/ while my Laravel PHP Framework is running on http://localhost:80/laravel/public

When I run this in my Angular 2 Project:

getAllProfessionals():Observable<any> {
        return this.http.get(globals.baseUrl+'/professionals/', {headers:this.utilService.getHeadersJson()}).map(this.utilService.map);
    }

I get this error in my browser:

Failed to load http://localhost/laravel/public/api/v1/professionals/: Response for preflight is invalid (redirect)

globals.baseUrl is http://localhost/laravel/public/api/v1/

And here are the calls from this.utilService

getHeadersJson() {
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization',  'Bearer ' + localStorage.getItem('token'));
        return headers;
    }   

    map(response: Response): any {
        return response.json();
    }

What am I doing wrong here? Is there something wrong with my api call?

When I do this get call:

getCountrys(filter):Observable<any> {
            return this.http.get(globals.baseUrl+'/country/' + filter, {headers:this.utilService.getHeadersJson()}).map(this.utilService.map);
        }

That call to get Countrys works!

When I goto the URL: http://localhost/laravel/public/api/v1/professionals/

This is what returns:

PLEASE HELP!

Here are the routes from Laravel api.php file located in my routes folder:

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::group([ 'prefix' => 'v1'], function () {

    Route::resource('register', 'v1\RegisterController');
    Route::resource('paintype', 'v1\PainTypeController');
    Route::resource('painlevel', 'v1\PainLevelController');
    Route::resource('painkiller', 'v1\PainKillersController');
    Route::resource('profession', 'v1\ProfessionsController');
    Route::resource('qualification', 'v1\QualificationsController');
    Route::resource('specialities', 'v1\SpecialitiesController');
    Route::resource('problems', 'v1\ProblemsController');
    Route::resource('user', 'v1\UserController');
    Route::post('login', 'v1\AuthController@login');
    Route::post('professionals', 'v1\ProfessionalsController@store');
    Route::post('patients', 'v1\PatientsController@store');
    Route::get('country/{text}', 'v1\LocationController@getCountries');
    Route::get('region/{id}', 'v1\LocationController@getRegions');
    Route::get('city/{id}', 'v1\LocationController@getCities');
    Route::get('reviews/{username}', 'v1\ReviewController@show');

    Route::group(['middleware' => ['before' => 'jwt.auth']], function () {
        Route::resource('post-job', 'v1\PostJobController');
        Route::post('reviews', 'v1\ReviewController@store');
        Route::get('profile', 'v1\AuthController@profile');
        Route::get('jobs/listjob', 'v1\PostJobController@getMyJobs');
    });

});

Show your related routes. It seems like you don't have a route specified for this method. — Devon, Jul 17 '18 at 15:27
@Devond the routes in Laravel or Angular? I have never setup a site like this before and a bit confused — user979331, Jul 17 '18 at 17:21
Laravel routes. MethodNotAllowed (405) usually means laravel doesn't have a registered route for that endpoint and HTTP method. — Devon, Jul 17 '18 at 17:22
Yeah, too bad Quentin closed this prematurely. Try opening a new question tagging Laravel and I'll post an answer. — Devon, Jul 17 '18 at 17:25
I will do that in an hour and half, I just did a question for another issue for another project. — user979331, Jul 17 '18 at 17:26
Ok, the main problem is you don't have a get route for professionals endpoint if you look at your routes file. — Devon, Jul 17 '18 at 17:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176178/discussion-between-user979331-and-devon). — user979331, Jul 17 '18 at 17:33

score 0 · Accepted Answer · answered Jul 17 '18 at 15:26

0

The issue is CORS you need to on the server(backend) enable the CORS headers and allow the appropriate http methods. The entire thing is most likely on your PHP layer or whatever you use to serve the data.

answered Jul 17 '18 at 15:26

Mike Tung

4,242
1
12
20

The call for countries works in the OP so I think this is more related to the 405 error on the specific route. – Devon Jul 17 '18 at 15:28
What headers specifically? What does a valid pre-flight response look like? – Peter Kionga-Kamau Mar 10 '21 at 19:38

Angular 2 Failed to load Response for preflight is invalid (redirect)

1 Answers1