Vue 资源跨站 HTTP 请求

Question

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

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

jQuery 工作正常，但是我想使用 Vue Resource 来处理请求。在我的网络日志中，我只看到发出的实际请求（最初没有 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);
                });

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

Answer 1

是否需要发出额外的OPTIONS 请求？我创建了一个小型 (32 LOC) 示例，它可以正常工作并检索数据：

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

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

你还看到，只有GET请求被执行，之前没有OPTIONS。