如何在 Vue.js 中使用多个 API
How to use multiple API's in Vue.js
我想在 Vue.js 中调用多个 API,如下所示:
<script>
const app = new Vue({
el: '#app',
data: {
array1: [],
array2: []
},
created(){
fetch('http://localhost/api/first')
.then(Response => Response.json())
.then(json => {
this.array1 = json
}),
fetch('http://localhost/api/second')
.then(Response => Response.json())
.then(json => {
this.array2 = json
})
}
})
</script>
当我在 Chrome 中使用 Vue devtools 时,我可以看到识别了 2 个数组,当我使用 Fiddler 时,我可以看到两个 API 都被调用了。问题是第二组 JSON 结果,即来自 http://localhost/api/second
的结果不填充 array2
.
有什么想法吗?
只是回答我自己的问题,以防其他人遇到类似问题。首先,上面问题中的代码工作正常。我的问题是 CORS 没有在服务器端为 http://localhost/api/second API 启用,但它需要启用。 Fiddler 不受 CORS 限制的影响,因此可以很好地获取 API 结果。
我想在 Vue.js 中调用多个 API,如下所示:
<script>
const app = new Vue({
el: '#app',
data: {
array1: [],
array2: []
},
created(){
fetch('http://localhost/api/first')
.then(Response => Response.json())
.then(json => {
this.array1 = json
}),
fetch('http://localhost/api/second')
.then(Response => Response.json())
.then(json => {
this.array2 = json
})
}
})
</script>
当我在 Chrome 中使用 Vue devtools 时,我可以看到识别了 2 个数组,当我使用 Fiddler 时,我可以看到两个 API 都被调用了。问题是第二组 JSON 结果,即来自 http://localhost/api/second
的结果不填充 array2
.
有什么想法吗?
只是回答我自己的问题,以防其他人遇到类似问题。首先,上面问题中的代码工作正常。我的问题是 CORS 没有在服务器端为 http://localhost/api/second API 启用,但它需要启用。 Fiddler 不受 CORS 限制的影响,因此可以很好地获取 API 结果。