Vue.js return hug 服务器中 CORS 查询后的未定义数据

Question

我想从 localhost API 从 hug 服务器获取数据到 vue 客户端。我在 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

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

Answer 1

您可能需要检查您的 api 回复。

特别是如果它的 json 负载中有属性 "documents"。

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

Vue.js return hug 服务器中 CORS 查询后的未定义数据

Vue.js return undefined data after CORS consult in hug server

javascript

vue.js

hug