rxjs5 Observable.ajax 忽略显式设置的 HTTP 标头答案

【问题标题】：rxjs5 Observable.ajax ignores explicitly set HTTP headersrxjs5 Observable.ajax 忽略显式设置的 HTTP 标头
【发布时间】：2018-04-14 03:34:55
【问题描述】：

我对 redux-observable 和 OAuth2 身份验证感到困惑。我被困在我必须向我的 HTTP 请求中添加授权标头的地方。标题尚未添加。相反，我将任何自定义设置的标头名称视为 Access-Control-Request-Headers 的值，仅此而已。

这是一个 redux 可观察的“史诗”：

const epicAuth = function(action$){
  return action$.ofType(DO_AUTHENTICATE)
    .mergeMap(
      action => Rx.Observable.ajax( authRequest(action.username, action.password))
        .map( response => renewTokens(response))
        .catch(error => Rx.Observable.of({
          type: AJAX_ERROR,
          payload: error,
          error: true,
        }))
    )
}

这是我的请求对象：

const authRequest = function(username, password){
  return {
    url: TOKEN_PROVIDER + '?grant_type=password&username=' + username + '&password=' + password,
    method: 'POST',
    responseType: 'json',
    crossDomain: true,
    withCredentials: true,
    headers: {
      'Authorization': 'Basic <base64-encoded-user@password>',
    }
  }
}

捕获的 HTTP 标头：

http://localhost:8082/api/oauth/token?grant_type=password&username=xxx&password=yyy

OPTIONS /api/oauth/token?grant_type=password&username=xxx&password=yyy HTTP/1.1
Host: localhost:8082
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:56.0) Gecko/20100101 Firefox/56.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization
Origin: http://localhost:3000
DNT: 1
Connection: keep-alive

HTTP/1.1 401 
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
WWW-Authenticate: Basic realm="MY_REALM/client"
Content-Type: text/html;charset=utf-8
Content-Language: en
Content-Length: 1098
Date: Wed, 01 Nov 2017 17:57:38 GMT

这一切都以 401 响应结束，因为未发送授权标头。我已经使用 Postman 工具手动测试了 Oauth2 端点，一切顺利：我有一个有效的访问令牌，可以更新它等等。CORS 在服务器端启用。

我在这里错过了什么？

【问题讨论】：

标签： ajax oauth-2.0 rxjs rxjs5 redux-observable

【解决方案1】：

客户端代码工作正常。

您已捕获 OPTIONS cors 请求，该请求询问服务器是否可以发布授权标头（请参阅Access-Control-Request-Headers: authorization）。

确保您已在服务器上正确配置 CORS。它不应该尝试验证 OPTIONS 调用。相反，它应该发送一个正确的响应，告诉浏览器是否允许进行 POST 调用。

【讨论】：