Vue.js 使用 vue-resource 记录 API 端点响应 [英] Vue.js log API endpoint response with vue-resource
问题描述
我试图在我的组件中记录 API 响应只是为了测试目的，但我仍然收到错误 401(未经授权)，我在我的本地主机中执行此操作，我的 API 也托管在本地主机中，但只是使用虚拟主机 url，所以我明白了:http://api.myurl.dev
我正在使用 vue-cli 在 localhost:8080 中运行我的 vue.
这是我的代码，我的main.js:
从'vue'导入Vue从 'vue-router' 导入 VueRouter从 'vue-resource' 导入 VueResource从 'vuex' 导入 Vuex从'./routes/router.js'导入路由器从'./App.vue'导入应用程序Vue.use(VueRouter)Vue.use(VueResource)Vue.use(Vuex)/* eslint-disable no-new *///开始新的 Vue({路由器，el: '#app',渲染:h =>h(应用程序)})//不记名令牌认证Vue.http.interceptors.push((request, next) => {request.headers.set('授权', 'Bearer eyJ0...')request.headers.set('接受', 'application/json')下一个()})和我的App.vue
<div id="应用程序"><img src="./assets/logo.png" alt=""><button type="button" @click="getFilial">click</button></模板><脚本>导出默认{数据 () {返回 {上下文:'应用程序上下文'，加载:假}},方法: {getFilial(){this.$http.get('http://api.myurl.dev/educational/filials').then(response => {控制台日志(响应数据)})}}}<风格>#应用程序 {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；文本对齐:居中；颜色:#2c3e50；边距顶部:60px；}</风格>
通过 vue-resource 触发你的 API，它实际上是在回答你的前端应用你没有被授权使用它，并带有一个适当的 HTTP 401 状态码.
专注于您的后端 API！您的前端应用程序运行良好，并且实际上与您的 API 进行了通信，该 API 会回答401":)
也许您的标头 (Authorization: Bearer eyJ0...) 没有按照您的 API 预期的格式进行格式化，但同样，请专注于您的 API 来调试它！
i'm trying log the API response in my component just to test purpose, but i still get a error 401 (unauthorized), i'm doing it in my localhost, my API is hosted in localhost too, but just using virtual-host url, so i get this: http://api.myurl.dev
and i'm running my vue in localhost:8080 using vue-cli.
this is my code im my main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Vuex from 'vuex'
import router from './routes/router.js'
import App from './App.vue'
Vue.use(VueRouter)
Vue.use(VueResource)
Vue.use(Vuex)
/* eslint-disable no-new */
// Start
new Vue({
router,
el: '#app',
render: h => h(App)
})
// Bearer token auth
Vue.http.interceptors.push((request, next) => {
request.headers.set('Authorization', 'Bearer eyJ0...')
request.headers.set('Accept', 'application/json')
next()
})
and my App.vue
<template>
<div id="app">
<img src="./assets/logo.png" alt="">
<button type="button" @click="getFilial">click</button>
</div>
</template>
<script>
export default {
data () {
return {
context: 'app context',
loaded: false
}
},
methods: {
getFilial () {
this.$http.get('http://api.myurl.dev/educational/filials').then(response => {
console.log(response.data)
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Triggering your API through vue-resource, it is actually answering to your frontend application that you are not authorized to consume it, with an appropriate HTTP 401 status code.
Focus on your backend API! Your frontend application is running pretty well, and actually communicating with your API, which answers "401" :)
Maybe your header (Authorization: Bearer eyJ0...) is not formatted as expected by your API but, again, focus on your API to debug this!
这篇关于Vue.js 使用 vue-resource 记录 API 端点响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
