Error: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Question

我正在 Angular 2 和 Laravel 5.4 中构建我的应用程序。 Angular2 用于客户端，laravel 5.4 用于服务器端。我在 laravel 中创建了 APIs 并从 Angular2.

请求了那些 APIs

在 Laravel 中，我配置了验证所有 API 的 Oauth 2 护照服务。在每个 API 呼叫中，我在 headers.

下面发送

'Content-Type', 'Authorization'

我用 headers 调用 API 的方式。

private headers = new Headers({'Content-Type': 'application/json', 'Authorization': 'Bearer ' + localStorage.getItem('access_token') });


let body = JSON.stringify({ user_id, company_id });
            console.log(this.headers);
            this.http.post(this.BuyerCostSetting, body, {headers:this.headers} )
            .subscribe(
                response => {
                    console.log('here');
                    console.log(response);                  
                },
                error => {
                    console.log(error.text());
                }
            );

当我从 Angular2 中点击这个 API 时，它显示以下错误：

Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Answer 1

错误信息很清楚，'Authorization' header 不被你的后台所允许。在您的后端 Laravel 应用程序中，您必须设置一个响应 header 包含：

Access-Control-Allow-Headers : 'Content-Type', 'Authorization'

在此处查看更多文档：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

Error: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

Error: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response

laravel-passport

angular