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

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. http://ift.tt/1FNj4m6

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://ift.tt/2ljVLlV. (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://ift.tt/2ljVLlV","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://ift.tt/1Nwxkdw

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.php

from Newest questions tagged laravel-5 - Stack Overflow http://ift.tt/2lk2Kvf
via IFTTT