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

Question

我正在接触redux-observable和OAuth2身份验证。我被困在我必须在HTTP请求中添加Authorization头的地方。未添加标头。相反，我认为任何自定义设置的头名称都是Access-Control-Request-Headers的值，仅此而已。

这是一部重复可见的“史诗”：

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

因为没有发送Authorization头，所以都以401响应结束。我已经用邮递员工具手动测试了Oauth2端点，一切都很顺利:我有一个有效的访问令牌，可以续订它，等等。CORS在服务器端启用。

这里我漏掉了什么？

Answer 1

客户端代码工作正常。

您已经捕获了OPTIONS cors请求，该请求询问服务器是否可以发布Authorization (参见Access-Control-Request-Headers: authorization)。

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