Question

使用Vue.js 1.0和Vue Resource交叉站点ajax请求。我收到以下错误：XMLHttpRequest无法加载http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。

我对该问题有基本的了解，但不确定如何使用请求添加回调函数，或者这是否是此示例的最佳解决方案。我在这里输入了完整的请求网址，以便更容易理解。

new Vue({
    el: '#stockList',

    data: function() {
        return {
            query: '',
            stocks: []
        };
      },

    ready: function() {
      this.getStocks();

      },

    methods: {
        getStocks: function() {
            this.$http.get('http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse',
                function(data) {
                  this.stocks = data;
                }
            );
        }
    }
})

Answer 1

我对网络几乎一无所知，但我能够使用以下方法获得几个远程api：

this.$http.jsonp

而不是

this.$http.get

Answer 2

＆＃34; No Access-Control-Allow-Origin＆＃34;标头通常是服务器的问题。这意味着，如果请求来自与服务器相同的域，则服务器配置为仅允许个人访问API。您需要从要从中请求数据的网站运行脚本，或者您需要更改服务器配置以允许访问所有域。

如果您无法访问服务器，并且您不想在浏览器中运行该脚本，那么我认为您可以使用像PhantomJS这样的无头浏览器导航到页面，将脚本元素插入包含脚本的dom中，执行该函数，然后从API返回数据。我可以为你编写代码，但说实话，它有点复杂。你必须知道如何使用node.js和phantom.js。我个人只使用了phantom.js作为Node＆＃39; html-pdf＆＃39;包装，但我确定一点点阅读你可以弄清楚如何做到这一点。

Answer 3

如果您无法控制dev.markitondemand.com，请将您的本地环境设置为http而不是https。

Vue.js + Vue资源No＆＃39; Access-Control-Allow-Origin＆＃39;

3 个答案: