javascript - 在拥抱服务器中进行 CORS 咨询后，Vue.js 返回未定义的数据

Question

我想从 hug 服务器到 vue 客户端从 localhost API 获取数据。我在 vue.js 中有这段代码:

        <div id="aplicacio">
        {{ documents }}
        <ul>
            <li v-for="document in documents">
                <a v-bind:href="document.path">{{ document.title }}</a>: {{document.text}}
            </li>
        </ul>
        </div>

    <script>
            var app = new Vue({
                el: '#aplicacio',
                data: {
                    documents: []
                },
                created () {
                    fetch('http://localhost:8000/documents/list')
                        .then(response => response.json())
                        .then(json => {
                            this.documents = json.documents
                        })
                }
            })
    </script>

拥抱这段代码:

import hug
api = hug.API(__name__)
api.http.add_middleware(hug.middleware.CORSMiddleware(api, max_age=100))


@hug.get('/documents/list')
def list():
    """Returns list of documents"""
    j = [{"text": "Hola", "path": "normativa.md", "title": "Normativa"}, {"text": "Això és una *activitat*", "path": "activitat1.md", "title": "Activitat 1"}]
    return j

我咨询的时候莫名其妙applicacio.documents在 firefox 控制台中，它让我得到 undefined .这不是 CORS 问题，因为我添加了 api.http.add_middleware(hug.middleware.CORSMiddleware(api, max_age=100))在后端和<meta http-equiv="Content-Security-Policy" content="" />在网页中。

Answer 1

您可能需要检查您的 api 响应。

特别是如果它在其 json 负载中具有属性“文档”。

.then(json => {
  // are we sure json includes a property documents?
  // maybe json is the array itself
  console.log(json) 
  this.documents = json.documents
})