2017-02-08 39 views
2

我目前正在使用基於令牌的身份驗證與Angular和Laravel構建應用程序。我最初的設置只是爲了通過創建一個BookController來測試API。起初,當我試圖從Angular調用這些數據時,我得到了一個Cross Origin Request Block錯誤。不過,我設法通過將標題添加到我的routes/web.php文件來解決此問題。這是整個文件。 注意:添加這些報頭後,我成功地能夠但是我目前按照本教程建立基於令牌的認證從另一個域Laravel 5.4 /由於交叉源請求而導致的角度可能錯誤處理拒絕

<?php 


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

//Route::get('/', '[email protected]'); 

//Route::resource('book/create', '[email protected]'); 

Auth::routes(); 

Route::get('/', '[email protected]'); 

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

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

Route::post('authenticate', '[email protected]'); 

即使使用API​​。 https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps

總之,我的問題是當我提交包含用戶名和密碼的表單時,我收到以下錯誤。下面我會再詳細說明一下,但這很困難,因爲它有很多。

跨來源請求阻止:同源策略不允許讀 遠程資源的http://www.example.local/authenticate/。 (原因:缺少CORS頭'Access-Control-Allow-Origin')。

而且

可能未處理的抑制: { 「數據」:NULL, 「狀態」: - 1, 「配置」:{ 「方法」: 「POST」, 「transformRequest」:[ null],「transformResponse」:[null],「jsonpCallbackParam」:「callback」,「url」:「http://www.example.local/authenticate/」,「data」:{「email」:「[email protected]」,「password」:「fsdfd 「},」withCredentials「:false,」headers「:{」Accept「:」application/json, text/plain, /「,」Content-Type「:」application/json; charset = utf-8 「}},」statusText「:」「}

我正在使用Angular UI Router V 0.4.2和satellizer。我的Angular版本是1.6.2它使用與API不同的域。很像上面的工作示例。

在laravel方面,我也遵循本教程添加中間件來嘗試解決這個問題,但沒有運氣。

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

我還將包括我AuthenticateController.php文件..

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

我的問題是,我不知道如果「可能未處理拒絕」是關係到「跨來源請求被阻止「錯誤。但我必須假設它是。

你能識別我的路線文件中可能允許一個而不是另一個的任何內容嗎?

編輯:

我注意到一個請求之間的差,另一個是一個是GET請求而其它則是OPTIONS請求。這可能是原因。

我已經將Header set Access-Control-Allow-Origin "*"添加到Apache的虛擬主機配置文件中,htaccess文件在Laravel項目的根目錄中。仍然沒有變化。

我想知道是角

+0

http://stackoverflow.com/questions/34748981/laravel-5-2-cors-get-not-working-with-preflight-options/35556406#35556406和http://stackoverflow.com/questions/16960419/angularjs-and-laravel-crossdomain-cors-xhr-requests-lack-remember-cook/17429795#17429795是相關的 – sideshowbarker

回答

1

服務器代碼此相關的事情需要處理,通過發送一個報頭,只把它的響應,其中包括Access-Control-Allow-Methods: GET, POST, PUT, DELETE頭和Access-Control-Allow-Headers: Authorization, Content-Type頭OPTIONS請求。

或者你可以嘗試使用https://github.com/barryvdh/laravel-cors這使得所有這些更容易。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests有一些您可能需要了解的信息。

相關問題