显示临时 headers 和待处理的请求

Question

我遇到 vue-resource 的问题导致 临时 headers 在 chrome 上显示 ，使用 Jquery换手没问题

问题只发生在 chrome + vue-resource

复制Link

Chrome 57.0.2987 Windows7

我没有安装 adblock 或 origin，即使在 chrome

的访客模式下也会发生这种情况

使用 setInterval 设置的简单调用

new Vue({

  el: '#main',

  data: {
    summary: null
  },
        methods: {
            updateSummary: function() {
      /*
                $.post( "summary.php", function( data ) {
                    if(typeof response.body.summary != 'undefined'){
                        this.summary = response.body.summary;
                    }
                });
        */
                this.$http.post('summary.php').then(function(response) {
                    if(typeof response.body.summary != 'undefined'){
                        this.summary = response.body.summary;
                    }
                });
            }
      },
        mounted: function () {
            this.updateSummary();

            setInterval(function () {
                this.updateSummary();
            }.bind(this), 2000);
        }
});

https://jsfiddle.net/7vo2s8z3/1/

重现步骤

通常当我让页面打开几个小时时会发生这种情况

预期是什么？

包含服务内容的 200 代码响应

实际发生了什么？

我收到了这些 headers

的请求

Request URL:http://127.0.0.1:8080/monitor/summary.php Referrer Policy:no-referrer-when-downgrade Request Headers

Provisional headers are shown Accept:application/json, text/plain, / Content-Type:application/json;charset=utf-8 Origin:http://127.0.0.1:8080 Referer:http://127.0.0.1:8080/monitor/ User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 X-Requested-With:XMLHttpRequest

并查看 chrome://net-internals/#events 失败的原因是

85487: URL_REQUEST http://127.0.0.1:8080/monitor/summary.php Start Time: 2017-04-18 09:38:43.826

t=29028 [st= 0] +REQUEST_ALIVE [dt=24184] --> priority = "MEDIUM" --> url = "http://127.0.0.1:8080/monitor/summary.php" t=29029 [st= 1] +DELEGATE_INFO [dt=24183] --> delegate_blocked_by = "RedirectToFileResourceHandler" t=53211 [st=24183] CANCELLED --> net_error = -2 (ERR_FAILED) t=53212 [st=24184] -REQUEST_ALIVE

Answer 1

我相信当实际请求未发送时会发生这种情况，通常是在加载缓存资源时。

基本上你向端口 8080 发送了一个 POST 请求，这导致了在检查器中看到的 "CAUTION: provisional headers are shown" 消息，然后请求似乎被一起阻止了。

基于此，一种可能的解决方案是设置 nginx 以代理将请求从通常的 SSL 端口 443 传递到节点 SSL 端口 8080（节点必须位于更高的端口，因为它不能运行作为 prod 中的根）。我想 Chrome 不喜欢对非常规 SSL 端口的 SSL 请求，但我绝对同意他们的错误消息可能更具体。

显示临时 headers 和待处理的请求

Provisional headers are shown and pending requests

javascript

php

google-chrome

vue-resource

复制Link

重现步骤

预期是什么？

实际发生了什么？