Vue资源跨站点HTTP请求

问题描述：

通常，当我向非本地服务器发出jQuery请求时，它会应用Cross-site HTTP request规则，并最初发送OPTIONS请求以验证端点的存在，然后发送请求，即Vue资源跨站点HTTP请求

GET to domain.tld/api/get/user/data/user_id

jQuery工作正常，但我想使用Vue资源来处理请求。在我的网络日志中，我只看到实际的请求（最初没有OPTIONS请求），并且没有收到数据。

有人有一个想法如何解决这个问题？

示例代码：

   var options = { 
       headers: { 
        'Authorization': 'Bearer xxx' 
       } 
      }; 
      this.$http.get(config.api.base_url + 'open/cities',[options]) 
       .then(function(response){ 
        console.log('new request'); 
        vm.cities = response; 
       }, function(error){ 
        console.log('error in .js:'); 
        console.log(error); 
       });

jquery-request

解决方案：

正如@Anton提到的，这是没有必要有两个请求（环境可以忽略不计）。不知道我改变了它的工作，但请求给了我一个错误。它包括正确设置标题。头不应该作为选项被通过，但作为HTTP的属性：

this.$http({ 
    root: config.api.base_url + 'open/cities', // url, endpoint 
    method: 'GET', 
    headers: { 
    'Authorization': 'Bearer xxx' 
    } 
}).then(function(response){ 
        console.log('new request'); 
        vm.cities = response; 
       }, function(error){ 
        console.log('error in .js:'); 
        console.log(error); 
       });

谢谢你们，这是一个团队的努力:)

你能告诉我们一个litlle你正在使用的代码ans你会使用哪些选项？你有没有看过> https://github.com/pagekit/vue-resource/blob/master/docs/config.md？ –

增加了一些代码...查看了vue-resource的所有配置可能性，但控制台只显示一个请求...在问题中解释。 – Lamarck

我不知道你有没有注意过，但在Chrome Dev Tools的网络标签中，有一个jQuery请求（在本例中为城市），它显示两次（即使我只编码了一个请求），一次检查如果它作为端点有效，另一个从后端获取返回的对象。现在使用Vue-Resource，它只有第一个请求。允许我在问题 – Lamarck

答

难道附加OPTIONS请求被作出的要求？我创建了一个小型（32 LOC）例如，工作正常和检索数据：

https://jsfiddle.net/ct372m7x/2/

正如你所看到的，数据是从非本地服务器加载。该示例位于jsfiddle.net，并且请求是httpbin.org - 这会导致应用CORS（您可以在下面的屏幕截图中看到Access-Control-Allow-Origin标题）。

你还看到的是，只有GET请求已被执行，在此之前没有OPTIONS。

当然不是，这是没有必要的，但是我没有得到任何结果，这就是为什么我有这个假设。我不确定我改变了什么，但结果现在是不同的。它正在工作:)感谢您的合作 – Lamarck

Vue资源跨站点HTTP请求

相关推荐