Ionic 3.5.2 http请求中缺少授权头

Question

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

我需要发送一个带有授权标头的身份验证请求，以便用户登录系统，就像这样

我总是得到404错误，我已经启用了CORS。我使用邮递员进行双重检查，我向邮递员发送相同的请求，看起来没问题。

我与小提琴手仔细检查，我发现了一个区别，就是标题授权缺失，它不会随我的请求一起发送。由于邮递员工作，我的代码可能有些不对劲，服务器实现没有问题。

这是邮递员发送的请求，带有授权标题，所以没关系

这是我的请求，看不到发送的Authorization标头，所以我得到了404

你能告诉我想念的吗？

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

编辑2：[7月15日] 我看到Angular使用方法OPTION发送我的请求，而Postman使用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

Answer 1

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

其次，我使用了headers.append('<header-type>', '<header-content>')而不是headers.set('<header-type>', '<header-content'>)。我认为你重写了标题值，所以我将其更改为：

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

另外，我注意到了另一个区别。我将post选项直接用作any对象类型，而不是使用RequestOptions构造函数：

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

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

Answer 2

我想我弄清楚了我的问题。我使用chrome扩展Allow-Control-Allow-Orginin作为CORS，我认为它有效，但事实并非如此。我切换到使用代理，然后现在没关系，我的代码没有任何改变。