Laravel 5.4/Angular mögliche fehlerhafte Zurückweisung wegen Querherkunftsanforderung blockiert

Question

Ich erstelle derzeit eine Anwendung, die tokenbasierte Authentifizierung mit Angular und Laravel verwendet. Ich habe zunächst alles eingerichtet, um die API zu testen, indem ich eine BookController erstelle. Zuerst bekam ich einen Cross-Origin-Request-Block-Fehler, als ich versuchte, diese Daten von Angular abzurufen. Jedoch habe ich es geschafft, dies zu beheben, indem ich die Header zu meiner routes/web.php Datei hinzufüge. Hier ist die ganze Datei. NB: Nachdem diese Header hinzugefügt war ich erfolgreich die Lage, die API zu verwenden, selbst aus einer anderen Domäne

<?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'); 

Jedoch habe ich zur Zeit dieses Tutorial Token basierende Authentifizierung einzurichten folgenden bin. https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps

Zusammengefasst ist mein Problem, wenn ich das Formular mit Benutzername und Passwort senden, bekomme ich die folgenden Fehler. Im Folgenden werde ich versuchen, ein wenig mehr zu erarbeiten, aber es ist ziemlich schwierig, da es viel dazu gibt.

Cross-Origin-Anforderung blockiert: Die Same Origin Policy nicht zulässt die Remote-Ressource bei http://www.example.local/authenticate/ lesen. (Grund: CORS-Header 'Access-Control-Allow-Origin' fehlt).

Und

Möglicherweise unhandled Ablehnung: { "data": null, "status": - 1, "config": { "Methode": "POST", "transformRequest": [ null], "transformResponse": [null], "jsonpCallbackParam": "Rückruf", "url": "http://www.example.local/authenticate/", "Daten": {"email": "dasdas@Dasa.com", "password": "fsdfd "}," withCredentials ": false," headers ": {" Übernehmen ":" application/json, text/plain, / "," Inhaltstyp ":" application/json; charset = utf-8 "}}," statusText ":" "}

Ich benutze Angular UI Router V 0.4.2 und satellizer. Meine Angular-Version ist 1.6.2 Es verwendet eine andere Domäne als die API. Ähnlich wie das obige Arbeitsbeispiel.

Auf der Laravel-Seite folgte ich auch diesem Tutorial, Middleware hinzuzufügen, um dieses Problem zu lösen, aber kein Glück.

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

Ich werde auch meine AuthenticateController.php Datei enthalten ..

<?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')); 
    } 
} 

Mein Problem ist, ich weiß nicht, auch wenn die „möglicherweise nicht behandelte Ablehnung“ die „Cross-Origin verwendet Anfrage blockiert "Fehler. Aber ich muss annehmen, dass es ist.

Kannst du etwas von meinen Routen-Dateien erkennen, die einen und keinen anderen zulassen?

EDIT:

Ich habe den Unterschied zwischen einer Anfrage bemerkt und eine andere ist, dass man eine GET Anfrage, während ein anderer ist ein OPTIONS Anfrage. Dies kann die Ursache sein.

Ich habe seit Header set Access-Control-Allow-Origin "*" sowohl die virtuelle Hosts-Konfigurationsdatei in Apache und zu einem hinzugefügt.htaccess-Datei im Stammverzeichnis des Laravel-Projekts. Immer noch keine Veränderung.

Ich frage mich, ist dies etwas im Zusammenhang mit in Schräg

Answer 1

Ihr Server-Code verarbeiten muss, dass OPTIONS-Anforderung durch eine Header-only Antwort darauf sendet, der die Access-Control-Allow-Methods: GET, POST, PUT, DELETE Header und Access-Control-Allow-Headers: Authorization, Content-Type Header enthält.

Oder Sie können einfach versuchen mit https://github.com/barryvdh/laravel-cors, die all dies leichter macht.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests hat allgemeine Informationen, die Sie vielleicht lesen möchten.