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跨域问题，不是很明白，求大神指导一下。