Vue.js利用Axios请求到数据后，不能在页面上显示？

Question

前端的代码：

<template>
  <div>
      <h1>Page01</h1>
      <ul>
      <li v-for="post in posts">
        {{post.body}}
      </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跨域问题，不是很明白，求大神指导一下。

Answer 1

这跨域了，表明当前的环境和接口环境不在同一个域名里面，你可以在配置关键词是proxyTable
一般在

Answer 2

跨域了啊
curl请求成功是因为跨域是浏览器的安全机制
简单的可以设置Access-Control-Allow-Origin Header 添加允许跨域的域
关键字：CORS
https://developer.mozilla.org...

Answer 3

跨域了就是你的html的访问域名或端口和你的接口不是同一个域名或端口而产生的问题，解决方案有

1. 将接口和前端访问的域名+端口设置为同一个

2. 不是同一个域名或端口就在写接口的服务端允许跨域请求

Answer 4

不用那么麻烦，直接设置webpack-dev-server的proxy vue-cli就设置proxyTable

Answer 5

控制台出现"Access-Control-Allow-Origin Header"一般都是api跨域的问题。
vue可以通过设置api代理的方法来解决跨域的问题。
vue-cli2中api的代理都在config的index.js中proxyTable部分。
proxyTable: {

 // 设置代理请求
  '/api': {
    target: 'http://127.0.0.1:5000/api/', // 接口地址
    changeOrigin: true, //是否跨域
    pathRewrite: {
      '^/api': '/', //本身的接口地址没有"/api"这种通用前缀,所以要rewrite,如果本身有则去掉.
    },
  },
},

开发环境的代理api设置在dev.env.js中
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VUE_APP_BASE_API: '"/api"',
})
VUE_APP_BASE_API设置为"/api"
vue一般情况下是需要对axios进行一次封装。
没有封装的话，axios调用的时候需要设置变量baseUrl = process.env.VUE_APP_BASE_API,
let url = baseUrl + "posts/"
这样就不会出现跨域的问题。
同理如果是vue-cli3.0
api代理设置在vue.config.js文件中

module.exports = {
 devServer: {
 // 设置主机地址
 host: 'localhost',
 // 设置默认端口
 port: 8080,
 // 设置代理
 proxy: {
  '/api': {
    // 目标 API 地址
    target: 'http://127.0.0.1:5000/api/',
    // 如果要代理 websockets
    ws: true,
    // 将主机标头的原点更改为目标URL
     changeOrigin: true
   }
  }
 }
}

至于生产环境，由于生产环境一般是nginx部署，所以api代理的问题在nginx中设置。vue代码可以不用设置。