开发者社区> 问答> 正文

Vue.js利用Axios请求到数据后,不能在页面上现实?? 400 报错

Vue.js利用Axios请求到数据后,不能在页面上现实?? 400 报错

前端的代码:

<template>
  <div>
      <h1>Page01</h1>
      <ul>
      <li v-for="post in posts">
        {{post}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      posts: []
    }
  },
  mounted: function () {
    this.$http.get('http://127.0.0.1:5000/api/posts/'
    ).then(function (response) {
      this.posts = response.data.subjects
    }, function (response) {
      console.log(response)
    })
  }

}
</script>

希望请求到数据并现实出来,但是报错,

后端应该是正确的,显示的是200

127.0.0.1 - - [29/Jul/2017 19:19:27] "GET /api/posts/ HTTP/1.1" 200 -

这说明请求是成功,同样利用curl命令同样也能请求到json数据,刚刚查了一下,有的说是axios跨域问题,不是很明白,求大神指导一下。

展开
收起
爱吃鱼的程序员 2020-06-04 14:02:18 724 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB
    header("Access-Control-Allow-Origin: *");

    设置API的header 我这个是php的。你改下就是了。

    ######感谢答主,但是我更倾向于修改前端的ProxyTable的配置######

    我在SF上问了同样的问题,Vue.js利用Axios请求到数据后,不能在页面上现实?

    好像有两种方法,第一种在前端修改proxyTable,第二种是修改后端的Access-Control-Allow-Origin的配置。

    但是我更倾向于第一种,因为我访问公开的API也会出现Access-Control-Allow-Origin的报错,例如https://api.douban.com/v2/movie/top250?count=10 但是同样的API使用Ajax就不会报错。详细解答参考以上链接。

    2020-06-04 16:27:04
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
Vue.js在前端服务化上的实践与探索 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载