【发布时间】：2019-04-14 10:04:01
【问题描述】：
所以标题几乎说明了一切！
我有一个 Angular 7 应用程序编译为 PWA，我的 package.json 在下面。我的后端 api 是用 AzureFunctions V2 编写的。
"dependencies": {
"@angular-devkit/core": "^7.0.5",
"@angular/animations": "^7.0.3",
"@angular/cdk": "^7.0.3",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/material": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/platform-server": "^7.0.3",
"@angular/pwa": "^0.10.5",
"@angular/router": "^7.0.3",
"@angular/service-worker": "^7.0.3",
"@types/date-fns": "^2.6.0",
"angular-calendar": "^0.26.4",
"chartist": "^0.11.0",
"core-js": "^2.5.7",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",
"zone.js": "^0.8.26"
},
我遇到的问题是，当我将 api 端点设置为使用 https 时，出现 504 Gateway Timeout 错误。我知道 https 配置/功能很好，因为这一切都是由 Azure 使用 Azure Functions 自动配置的。
此外，我所有的 api 请求都可以通过 https 与 Postman 一起正常工作。
更新 - 所以有点开发，如果我在没有启用 PWA 的情况下在本地运行它，我会得到以下不同的 ERR_SPDY_PROTOCOL_ERROR
这是 chrome 中的调试信息 chrome://net-internals/#events
t=9314 [st= 1] UPLOAD_DATA_STREAM_READ [dt=0]
--> current_position = 0
t=9314 [st= 1] HTTP2_STREAM_UPDATE_SEND_WINDOW
--> delta = -73
--> stream_id = 3
--> window_size = 1048503
t=9314 [st= 1] -HTTP_TRANSACTION_SEND_REQUEST
t=9314 [st= 1] +HTTP_TRANSACTION_READ_HEADERS [dt=21]
t=9335 [st=22] HTTP2_STREAM_ERROR
--> description = "Server reset stream."
--> net_error = "ERR_SPDY_PROTOCOL_ERROR"
--> stream_id = 3
t=9335 [st=22] -HTTP_TRANSACTION_READ_HEADERS
--> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
t=9335 [st=22] -URL_REQUEST_START_JOB
--> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
t=9335 [st=22] URL_REQUEST_DELEGATE_RESPONSE_STARTED [dt=0]
t=9335 [st=22] -REQUEST_ALIVE
--> net_error = -337 (ERR_SPDY_PROTOCOL_ERROR)
好的，5 小时后再次更新！这只会变得越来越奇怪。
我强制在我的标头中输入一个有效的令牌，以查看我登录后其他端点是否正常工作。令人惊讶的是，即使在 https 下，其他一切都可以正常工作，这只是我的 Https POST /token x-www-form-urlencoded 请求没用？！？！？ （http很好！）
因此，出于绝望，我安装了 FireFox，只是看看能否获得更多调试信息，它确实做到了。我收到了这个错误CORS request did not succeed，但没有任何线索说明为什么大多数人会出现这种情况。
这导致我尝试这个Azure Functions Access-Control-Allow-Credentials with CORS
这也没有帮助。我不相信它会起作用，因为我所有的 CORS 设置都很好，我通过强制输入令牌证明了这一点。
我决定使用下面的代码不使用 Angular HttpClient，从而将 Angular 完全排除在外：
public getToken()
{
let xhr = new XMLHttpRequest();
xhr.open("POST", this.API_URL + '/token', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// save token here
}
};
xhr.send(body);
}
而且它只是工作！怎么回事？所以我为此浪费了一天的时间，我想这证明这与 Angular HttpClient 有关。
所以我现在就继续。
如果有人知道为什么会发生这种情况或遇到过这种情况，我将不胜感激，因为我宁愿保持一致并在整个应用程序中使用 HttpClient。
【问题讨论】：
标签： azure-functions angular-httpclient angular7 angular-pwa