vue-resource的Ajax请求错误

Question

我正在使用vue webpack模板来开发使用vue js 2的应用程序，我正在使用用于ajax的vue资源

this.$http.get('http://localhost:8081/test/station.json')
          .then(response => {
              console.log(response);

          }, response => {
              // error callback
          });

但出现错误“加载http://localhost:8081/test/station.json失败:请求的资源上没有'Access-Control-Allow- Origin‘标头。因此不允许访问源'http://localhost:8080’。”

如何解决这个问题？

Answer 1

显然，您的带有json文件的url没有任何头文件，因此调用是不允许的。因此您必须将标头设置为content-type : application/json

附注:您不应该使用vue-resource，因为vue团队不再支持它。您应该使用像axios这样的东西来发出Ajax请求

Answer 2

现在我使用了带头部的axios get请求，但得到了同样的错误，我的代码如下

this.axios.get('https://feeds.citibikenyc.com/stations/stations.json',{
          headers: {
              'content-type': 'application/json'
          }
      }).then((response) => {
          console.log(response);
      }).then((error) => {
          console.log(error);
      });

错误是

无法加载https://feeds.citibikenyc.com/stations/stations.json：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源'http://localhost:8080‘