Vue.js + Vue 资源没有“访问控制允许来源”答案

【问题标题】：Vue.js + Vue Resource No 'Access-Control-Allow-Origin'Vue.js + Vue 资源没有“访问控制允许来源”
【发布时间】：2016-02-09 17:01:05
【问题描述】：

使用 Vue.js 1.0 和 Vue 资源的跨站点 ajax 请求。我收到以下错误：XMLHttpRequest 无法加载 http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse。请求的资源上不存在“Access-Control-Allow-Origin”标头。

我对这个问题有基本的了解，但不确定如何在请求中添加回调函数，或者这是否是本示例的最佳解决方案。我在这里输入完整的请求 URL 只是为了更容易理解。

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;
                }
            );
        }
    }
})

【问题讨论】：

错误消息明确指出服务器不允许来源。对于跨站点请求，服务器必须返回/指定允许请求资源的来源。如果您有控制权在服务器上，请指定此标头值作为响应或* 为所有。
也许我不明白这个问题。我正在运行一个本地开发服务器来学习 JavaScript 和 Vue，所以我猜想我可以控制原始服务器。我无法控制 markitondemand.com 服务器，但如果您将该网址放在浏览器中，它确实会返回响应。我认为通过使用 JASONP 可以避免跨站点协议？你能解释一下我错过了什么吗？谢谢
嗯，您发送请求的方式似乎是跨站点的，并且服务器未配置为这样做。

标签： ajax vue.js

【解决方案1】：

我对网络的了解几乎为零，但我能够使用几个远程 API 来工作：

this.$http.jsonp

而不是

this.$http.get

【讨论】：

【解决方案2】：

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

如果您无权访问服务器，并且不想在浏览器中运行脚本，那么我认为您可以使用 PhantomJS 之类的无头浏览器导航到页面，插入script 元素到包含你的脚本的 dom 中，执行函数，然后从 API 返回数据。我可以为您编写代码，但老实说，它有点复杂。您必须知道如何使用 node.js 和 phantom.js。我个人只将 phantom.js 用于 Node 'html-pdf' 包，但我相信只要稍微阅读一下，你就可以知道如何做到这一点。

【讨论】：

【解决方案3】：

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

【讨论】：

我对 AJAX 的理解充其量只是新手，所以我认为 markitondemand 会接受跨站点，因为他们提供免费的 API。也许不是这样，或者我没有正确格式化请求。我最终使用 PHP 向他们发出请求 --- $returned = json_decode(file_get_contents($url), true); --- 然后让 vue 调用我从他们的数据创建的本地 api。感谢您的回复。