vue.js - axios接口数据获取报错

问题描述

问 题

<template>
<div>
    <P>axios的数据:{{mess}}</P>
</div>
</template>
<script>
import child from './input-li.vue';

export default{
    components:{
        child
    },
    data(){
        return {
            sContent:"This is hello components",
            username:'',
            mess:'不成功'
        }
    },
    mounted(){
        this.crea();
    },
    methods:{
        crea(){
            this.$axios.get("http://api.telojob.com/v1/job/show/6")
                .then((rsp)=> {
                    this.mess = rsp.data.data.position_name;
 //                        console.log(rsp);
                    alert(rsp);
                })
        },
        userNameChange(){
            this.$store.state.user_name = this.username;
        },
        submit(){
            this.$store.commit("showUserName"); //submit方法指派到showUserName方法
        }
    }
}
 </script>

json数据：

{
"code": "200",
"message": "查询成功！",
"data": {
    "position_name": "开发工程师"
}
}

报错提示:XMLHttpRequest cannot load http://api.telojob.com/v1/job... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8083' is therefore not allowed access.
这是神马情况？？

解决方案

跨域了，简单来说就是你目前的域名http://localhost:8083并没有获得直接访问http://api.telojob.com/的权限，或者说它没有给你访问的授权。详细信息可以参考下MDN - 浏览器的同源策略和MDN - HTTP访问控制（CORS）。

这篇关于vue.js - axios接口数据获取报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！