Question

我正在开发一个vue项目，后端是django。 django api将返回StreamHTTPResponse。我希望在django产生一些数据的同时显示响应。我不知道如何配置Vue的代理表来对此进行存档。

# Create your views here.

from django.http import StreamingHttpResponse, HttpResponse


def stream_response_generator():
    from shelljob import proc
    g = proc.Group()
    p = g.run(["bash", "-c", "nmap baidu.com -sV -vvv"])

    while g.is_pending():
        lines = g.readlines()
        for proc, line in lines:
            yield line


def stream_response(request):
    return StreamingHttpResponse(stream_response_generator())


def index(request):
    return HttpResponse(content="""
    <head><style>
    body {
    background: lightblue;
    }
    </style></head>
<p>Hello

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/tools/test');
xhr.seenBytes = 0;
xhr.onreadystatechange = function() {
  console.log("state change.. state: "+ xhr.readyState);
  if(xhr.readyState == 3) {
    var newData = xhr.response.substr(xhr.seenBytes);
    console.log("newData: <<" +newData+ ">>");
    document.body.innerHTML += "" +newData+ "<br />";
    xhr.seenBytes = xhr.responseText.length;
    console.log("seenBytes: " +xhr.seenBytes);
  }
};
xhr.addEventListener("error", function(e) {
  console.log("error: " +e);
});
console.log(xhr);
xhr.send();
</script>""")

使用python manage.py runserver并访问/ index时，此视图效果很好。它运行良好，并逐行显示子流程的输出。但是在Vue中，我创建了这样的视图：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
    </ul>
  </div>
</template>

<script>
// const axios = require('axios')
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    this.steamIT()
  },
  methods: {
    steamIT: function () {
      var xhr = new XMLHttpRequest()
      xhr.open('GET', '/tools/test')
      xhr.seenBytes = 0
      xhr.onreadystatechange = function () {
        console.log('state change.. state: ' + xhr.readyState)
        if (xhr.readyState === 3) {
          var newData = xhr.response.substr(xhr.seenBytes)
          console.log('newData: <<' + newData + '>>')
          document.body.innerHTML += 'New data: <<' + newData + '>><br />'
          xhr.seenBytes = xhr.responseText.length
          console.log('seenBytes: ' + xhr.seenBytes)
        }
      }
      xhr.addEventListener('error', function (e) {
        console.log('error: ' + e)
      })
      console.log(xhr)
      xhr.send()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

在index.js proxyconfig中，我像这样配置代理：

proxyTable: {
  '/tools':{
    target: 'http://127.0.0.1:8000/', # django is run at 127.0.0.1:8000
    headers: {
    },
    selfHandleResponse:true,
    changeOrigin: true
  },
},

但不起作用。在子过程完成后，vue proxy_table将返回所有数据。像这样的Vue代码。

如何在vue项目中禁用代理缓冲区？

0 个答案: