我目前正在使用Angular和Laravel的基于令牌的身份验证构建一个应用程序。我最初只是通过创建一个BookController来测试API。起初，当我试图从Angular调用这些数据时，我遇到了一个跨源请求块错误。然而，我设法通过将头添加到routes/web.php文件中来解决这个问题。这是整个文件注意：添加这些头之后，我甚至可以从另一个域成功地使用API
<?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');
然而，我目前正在遵循本教程来设置基于令牌的身份验证。https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps
总之，我的问题是，当我提交包含用户名和密码的表格时，我会出现以下错误。下面我将尝试详细说明更多，但这是相当困难的，因为有很多。
阻止跨来源请求：同源策略不允许读取位于的远程资源http://www.example.local/authenticate/.(原因：缺少CORS标头"Access Control Allow Origin")。
和
可能未经处理的拒绝：｛"data"：null，"status"：-1，"config"：｛http://www.example.local/authenticate/"，"数据"：｛"电子邮件"："dasdas@Dasa.com"，"password"："fsdfd"｝，"withCredentials"：false，"headers"：｛"Accept"："application/json，text/plain，/"，"内容类型"："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 AppHttpControllers;
use IlluminateHttpRequest;
use AppHttpRequests;
use AppHttpControllersController;
use JWTAuth;
use TymonJWTAuthExceptionsJWTException;
use AppUser;
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中的虚拟主机配置文件和Laravel项目根目录中的.htaccess文件中。仍然没有变化。
我想知道这与Angular 中的内容有关吗
您的服务器代码需要通过向OPTIONS请求发送仅包含标头的响应来处理该请求，该响应包括Access-Control-Allow-Methods: GET, POST, PUT, DELETE标头和Access-Control-Allow-Headers: Authorization, Content-Type标头。
或者您可以尝试使用https://github.com/barryvdh/laravel-cors这让这一切变得更容易。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests有你可能想阅读的一般信息。