Question

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

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

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

但收到错误＆＃34;无法加载http://localhost:8081/test/station.json：没有＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此不允许访问。＆＃34;

如何解决这个问题

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：否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:8080＆＃39;因此不允许访问

vue-resource的Ajax请求错误

2 个答案: