axios接口数据获取报错

Question

<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.
这是神马情况？？

Answer 1

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

Answer 2

跨域了，让你们后端处理下。

Answer 3

开发环境下配置下proxyTable [config/index.js]
另外，关于cors，专门整理过一篇：
处理各浏览器跨域cookie

Answer 4

No 'Access-Control-Allow-Origin' 这种错误很明显是跨域了，浏览器的默认安全机制，在本地开发过成中解决跨域有两种方式
1.利用nginx做代理转发
2.把浏览器的安全等级降到最低