Laravel 5.4 / Angular possible mishandled rejection due to cross origin request blocked

Question

I am currently building an application using token based authentication with Angular and Laravel. I initially set things up just to test the API by creating a BookController . At first I was getting a Cross Origin Request Block error when I tried to call this data from Angular. However I managed to resolve this by adding the headers to my routes/web.php file. Here is the whole file. NB: After adding these headers I was succesfully able to use the API even from another domain

<?php


header('Access-Control-Allow-Origin: *');
header( 'Access-Control-Allow-Headers: Authorization, Content-Type' );

//Route::get('/', 'BookController@show');

//Route::resource('book/create', 'BookController@create');

Auth::routes();

Route::get('/', 'HomeController@index');

Route::resource('book', 'BookController');

Route::resource('authenticate', 'AuthenticateController', ['only' => ['index']]);

Route::post('authenticate', 'AuthenticateController@authenticate');

However I am currently following this tutorial to set up token based authentication. https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps

To summarise , my issue is when I submit the form containing username and password I am getting the following errors. Below I will try elaborate a bit more but it is quite difficult as there is alot to it.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://www.example.local/authenticate/. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

And

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://www.example.local/authenticate/","data":{"email":"dasdas@Dasa.com","password":"fsdfd"},"withCredentials":false,"headers":{"Accept":"application/json, text/plain, /","Content-Type":"application/json;charset=utf-8"}},"statusText":""}

I am using Angular UI Router V 0.4.2 and satellizer. My Angular version is 1.6.2 It using a different domain than the API. Much like the working example above.

On the laravel side I also followed this tutorial to add middleware to attempt to resolve this but no luck.

http://en.vedovelli.com.br/2015/web-development/Laravel-5-1-enable-CORS/

I will also include my AuthenticateController.php file..

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use JWTAuth;
use Tymon\JWTAuth\Exceptions\JWTException;
use App\User;


class AuthenticateController extends Controller
{

    public function __construct()
    {
        // Apply the jwt.auth middleware to all methods in this controller
        // except for the authenticate method. We don't want to prevent
        // the user from retrieving their token if they don't already have it
        $this->middleware('jwt.auth', ['except' => ['authenticate']]);
        $this->middleware('cors');

    }

    public function index()
    {

        // Retrieve all the users in the database and return them
        $users = User::all();
        return $users;
    }

    public function authenticate(Request $request)
    {
        $credentials = $request->only('email', 'password');

        try {
            // verify the credentials and create a token for the user
            if (! $token = JWTAuth::attempt($credentials)) {
                return response()->json(['error' => 'invalid_credentials'], 401);
            }
        } catch (JWTException $e) {
            // something went wrong
            return response()->json(['error' => 'could_not_create_token'], 500);
        }

        // if no errors are encountered we can return a JWT
        return response()->json(compact('token'));
    }
}

My issue is I do not even know if the "possibly unhandled rejection" is related to the "Cross-Origin Request Blocked" error. But I have to assume it is.

Can you recognise anything from my routes files that may be allowing one and not another?

EDIT:

I have noticed the difference between one request and another is that one is a GET request while another is an OPTIONS request. This may be the cause.

I have since added Header set Access-Control-Allow-Origin "*" to both the virtual hosts config file in Apache and to a .htaccess file in the root of the Laravel project. Still no change.

I am wondering is this related something in Angular

http://stackoverflow.com/questions/34748981/laravel-5-2-cors-get-not-working-with-preflight-options/35556406#35556406 and http://stackoverflow.com/questions/16960419/angularjs-and-laravel-crossdomain-cors-xhr-requests-lacking-remember-cook/17429795#17429795 are relevant — sideshowbarker, Feb 08 '17 at 18:23

score 1 · Accepted Answer · answered Feb 08 '17 at 18:22

Your server code needs to handle that OPTIONS request by sending a headers-only response to it that includes the Access-Control-Allow-Methods: GET, POST, PUT, DELETE header and Access-Control-Allow-Headers: Authorization, Content-Type header.

Or you can just try using https://github.com/barryvdh/laravel-cors which makes all this easier.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests has general info you might want to read up on.

Laravel 5.4 / Angular possible mishandled rejection due to cross origin request blocked

1 Answers1