我无法在 Angular 4 上向 laravel api 发送带有标头的 http 请求

Posted 2023-03-07

【中文标题】我无法在 Angular 4 上向 laravel api 发送带有标头的 http 请求

【英文标题】：i can't send http request with header to laravel api on angular 4

【发布时间】：2018-04-02 09:57:00

【问题描述】：

我正在尝试向我的 Laravel 5.3 API 发送带有标头的请求，使用 Laravel 护照进行身份验证。返回的标头：

405（不允许的方法） 对预检请求的响应 没有通过访问控制检查：没有“Access-Control-Allow-Origin” 请求的资源上存在标头。起源 'http://localhost:4200' 因此不允许访问。响应 有 HTTP 状态码 405。

我在 Laravel 上有 CORS 中间件：

header('Access-Control-Allow-Origin', '*')<br>
  header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')<br>
  header('Access-Control-Allow-Headers', 'Origin, Content-Type, Authorization , X-Auth-Token');<br>

我的前端和 api 有不同的地址： myfrontend.mydomain.com myapi.mydomain.com

我的 Angular HTTP 请求标头是：

let headers = new Headers(
      'Content-Type': 'application/json; charset=utf-8',<br>
      'Authorization': 'LaravelReturnedAuthToken',<br>
      'Accept': 'application/json; charset=utf-8',<br>
      'Access-Control-Allow-Origin': '*',<br>
      'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',<br>
      'Access-Control-Allow-Headers': 'Content-Type, x-xsrf-token',<br>
);

let options = new RequestOptions(headers: headers);

如果我删除 Angular HTTP 请求标头，一切正常。 我不明白我做错了什么。

API：Laravel 5.3 前端：Angular 4

【问题讨论】：

405 (Method Not Allowed) 表示您需要配置 php 服务器来处理 OPTIONS 请求。因为您的请求会在请求中添加 Content-Type: application/json 和 Authorization 标头，这会触发您的浏览器（自动自行）执行 CORS 预检 OPTIONS 请求，然后再尝试从您自己的代码发出的任何请求。如果预检失败，那么浏览器将永远不会继续尝试在您的代码中发出请求。见developer.mozilla.org/en-US/docs/Web/HTTP/…

【参考方案1】：

只需从您的请求中删除那些 Access-Control 标头即可。它们并不是要随请求一起发送，而是必须随响应一起返回。

关于 MDN 的更多信息：

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

我改为：let headers = new Headers( 'Content-Type': 'application/json; charset=utf-8', 'Authorization': 'LaravelReturnedAuthToken', 'Accept': '应用程序/json; charset=utf-8', );但它还没有工作！

好吧，你的 API 可能没有像你想象的那样配置。您应该在 chrome 的网络选项卡中检查这一点，您可以在那里看到完整的请求和响应标头。我猜那些 Access-Control 标头将在响应中丢失。您在此处描述的错误是这样说的：No 'Access-Control-Allow-Origin' header is present on the requested resource.