身份验证中的 Laravel Angular CORS 问题

Posted 2023-03-04

【中文标题】身份验证中的 Laravel Angular CORS 问题

【英文标题】：Laravel Angular CORS issue in Authentication

【发布时间】：2016-02-04 17:28:42

【问题描述】：

我正在按照本教程使用 Laravel 和 Angular 使用令牌设置身份验证。

https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps

这很好用，但是当我单独托管 Laravel（作为后端），并将 Angular 前端托管在另一个域上时，我在控制台中得到了愚蠢的错误：-

XMLHttpRequest cannot load http://jotdot.mysite.com/api/authenticate.
Response to preflight request doesn't pass access control check: The 
'Access-Control-Allow-Origin' header contains multiple values '*, *', but 
only one is allowed. Origin 'http://jotdotfrontend.mysite.com' is 
therefore not allowed access.

我在 Laravel 中放置了一个 CORS 中间件，它适用于简单的路由。

class Cors

/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)

    return $next($request)->header('Access-Control-Allow-Origin', '*')-  >header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

如何向其中添加 CORS 中间件：-

Route::group(['prefix' => 'api', 'middleware' => 'cors'], function()

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

在 ['prefix' => 'api'] 旁边添加它并没有解决问题。

谢谢

【问题讨论】：

您能否更新路由示例以显示您如何将中间件添加到路由组定义中？

@watcher - 我更新了它，我还有另一种方法，但它仍然没有工作

【参考方案1】：

我认为您的问题是您的中间件很可能充当“后”中间件，因此在请求返回给客户端之前不会对其进行修改。相反，它在 发送它之后修改请求，这对你没有任何好处。

尝试像这样修改您的 handle 函数：

public function handle($request, Closure $next)

    $request->header('Access-Control-Allow-Origin', '*');
    $request->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    $request->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');

    return $next($request);

【讨论】：

出现错误 - 调用字符串上的成员函数 header()。检查它

是的，这解决了标头问题，但控制台仍然给出错误 - “请求标头字段 Content-Type 不允许在预检响应中被 Access-Control-Allow-Headers 所允许。”

至少这是一个不同的错误，所以，进步！查看更新。我添加了Access-Control-Allow-Headers 标头，但您可能不需要包含我所做的所有内容（或者您可能需要包含比我做的更多的内容）。根据here，您只需在预检（OPTIONS）请求中包含该标头

我添加了“$request->header('Access-Control-Allow-Credentials', true);”但仍然是同样的错误。

@StacyJ 那是因为这不是当前错误所抱怨的。添加 Access-Control-Allow-Headers 标头

【参考方案2】：

嗯，到目前为止，有两种方法可以解决这个问题。 我已经在我对本网站另一个问题的回答中解释了解决方案。

请检查以下答案：

Angular CORS Issue for Laravel Backend