Ionic 3.5.2 http 请求中缺少授权标头答案

【问题标题】：Ionic 3.5.2 Authorization header missing in http requestIonic 3.5.2 http 请求中缺少授权标头
【发布时间】：2017-12-19 10:51:51
【问题描述】：

我正在使用 Ionic Framework 3.5.2 进行测试，这是版本信息

我需要发送一个附加了授权标头的身份验证请求，以使用户登录到系统，如下所示

我总是收到 404 错误，我已经启用了 CORS。我使用邮递员仔细检查，我用邮递员发送相同的请求，看起来没问题。

我仔细检查了提琴手，我发现了一个不同之处，即标题授权丢失，它没有与我的请求一起发送。由于邮递员工作，我的代码可能有问题，服务器实现没有问题。

这是Postman发送的请求，带有授权头，所以可以

这是我的请求，没有看到发送的授权标头，所以我得到了 404

你能告诉我我想念什么吗？

编辑 1：为 Anexon 添加屏幕截图

编辑 2：[7 月 15 日] 我看到 Angular 使用方法 OPTION 发送我的请求，而邮递员使用 POST 有效。我现在的问题是，我怎样才能像 Postman 一样发送 POST？

以防万一为了支持 OPTION，我应该从服务器端实现什么？但这是“以防万一”，服务器现在看起来很好用 POST。

这是邮递员的

POST https://abc.xyz.com/SignIn HTTP/1.1
Host: abc.xyz.com
Connection: keep-alive
Content-Length: 63
Accept: application/vnd.softix.api-v2+json
Postman-Token: c2aa12cc-ea95-59d6-79de-4829b96b759b
Cache-Control: no-cache
Origin: chrome-extension://fhbjgbiflinjbdggehcddcbncdddomop
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3147.0 Safari/537.36
Authorization: Bearer yTJVNAb4_4h0BRTEA8MoNBuQhpKXuO6BvyIabbSDZMdBW_RTG2_tNME7R_RqeFqMjg2
Content-Type: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,vi;q=0.6

{ "Username" : "user", "Password" : "pass" }

这是我的

OPTIONS https://abc.xyz.com/SignIn HTTP/1.1
Host: abc.xyz.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://evil.com/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3147.0 Safari/537.36
Access-Control-Request-Headers: authorization,content-type
Accept: */*
Referer: http://localhost:8100/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8,vi;q=0.6

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

您是否检查过authHeader 变量不为空？

其次，我使用的是headers.append('<header-type>', '<header-content>') 而不是headers.set('<header-type>', '<header-content'>)。我认为您正在覆盖 headers 值，因此我将其更改为：

let authHeader = 'Bearer $(this.authTokenResponse.access_token)';

headers = new Headers();
headers.append('Authorization', authHeaders);
headers.append('Accept', 'application/vdn.softix.api-v2+json');
headers.append('Content-Type', 'application/json');

// ...

编辑 1

另外，我注意到另一个不同之处。我直接使用帖子选项作为any 对象类型，而不是使用RequestOptions 构造函数：

let options = {};
options.headers = headers;

post('<url_request>', signinRequest, options)
  .map(res => res.json())
  .subscribe(data =>{
    this.signinResponse = data;
    console.log(data);
  })

【讨论】：

确定 Anexon，我添加了一个屏幕截图，我已经调试过了，authHeader 和 headers 对象看起来都很好。我曾经使用“附加”，但它也不起作用。
似乎您通过帖子选项传递的所有标题都丢失了。可能与 RequestOptions 构造函数有关。
谢谢 Anexon，我已经更新为使用 RequestionOptions 就像你所拥有的一样，但到目前为止还没有运气。我发现 Angular 正在使用方法 OPTION 发送我的请求，而邮递员使用 POST 有效，而我的无效。我现在的问题是，我怎样才能像邮递员一样发送 POST？我还用标题编辑了我的问题，以便您更轻松地查看。谢谢。以防万一为了支持选项，我应该从服务器端实现做什么？但这是“以防万一”，服务器现在看起来很好用 POST。
Postman 太“漂亮”了，很多时候我们发现 Postman 把事情做得太简单了，到了生产阶段一切都失败了……但无论如何它是一个很好的工具。你在服务器端使用 Nginx 吗？您可能需要更新服务器块以允许选项请求。我找到了这个comment。似乎Content-Type application/json 正在触发预检选项请求。您是否尝试不发送Content-Type 或使用包含text/plain 发送它？

【解决方案2】：

我想我解决了我的问题。我为 CORS 使用了 Chrome 扩展 Allow-Control-Allow-Orginin，我认为它有效，但它没有。我改用代理，然后现在没问题，我的代码没有任何改变。

【讨论】：