标签: vue-resource

我正在尝试使用webpack-dev-server代理配置将api请求发送到外部域,我似乎无法使其正常工作.

这是我的配置:

var path = require('path')

module.exports = {
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets'
    },
    devServer: {
        contentBase: 'public',
        proxy:{
            '/api/v1*': {
                target: 'http://laravelandwebpack.demo/',
                secure: false
            }
        }
    }
}

因此,/api/v1...只要我的应用程序向uri 发出请求,它就应该发送该请求http://laravelandwebpack.demo.

在我的Vue应用程序中,我正在使用它vue-resource来发出请求,并且我使用所需的uri前缀默认所有请求:

var Vue = require('vue')
Vue.use(require('vue-resource'))

new Vue({
    el: 'body',
    http: {
        root: '/api/v1', // prefix all requests with this
        headers:{
            test: 'testheader'
        }
    },
    ready: function (){
        this.$http({
            url: 'tasks',
            method: 'GET'
        }).then(function (response){
            console.log(response); …

我的Vue.JS组件中有以下方法:

removeItems (itemsArray) {
    this.$http.delete(this.apiUrl, {items : itemsArray})
    .then((response) => {
       this.msg = response.msg;
    });
}

在vue-resource 0.8.0中一切正常.升级到1.0.3后它没有.我在发行说明中发现他们body从GET请求中删除了,这是有道理的,但为什么DELETE请求停止工作？如果它们body在DELETE请求中禁用显式指定,我该如何添加它？

我在Laravel 5.1中使用Zizaco /委托.我想通过使用复选框显式授予特定角色的权限.这是我的代码:

获取角色:

fetchRoles: function(){
        this.$http.get('api/role',function(data){
            this.$set('roles',data);
        });
    }

获取权限:

fetchPermissions: function(){
            this.$http.get('api/permission',function(data){
                this.$set('permissions',data);
            });
        }

以下是分配角色和权限的表:

<table class="table table-bordered table-responsive">
    <thead>                                                        
       <th>Permissions/Roles</th>
       <th v-for="role in roles">
           @{{ role.display_name }}
       </th>
    </thead>
    <tbody>
       <tr v-for="permission in permissions">
           <td>@{{ permission.display_name }}</td>
           <td v-for="role in roles">
               <input type="checkbox" value="@{{ permission.id }}" name="roles[@{{ role.id }}][permissions][]">
           </td>
       </tr>
    </tbody>
    <tfoot>
       <tr>
          <td>
              <button type="submit" class="btn btn-primary">Alter Permission</button>
          </td>
       </tr>
    </tfoot>
</table>

输出如下: 输出的屏幕截图

权限也通过以下方法成功分配:

public function changePermission(Request $request){
        $input = $request->all(); …

我正在努力使用vue-resource制作JSONP请求.任何人都可以提供一些工作示例来演示定义jsonp回调的正确方法,在Vue组件中处理调用等等.

谢谢

**编辑:**对于其他人,让我们澄清一下情况.重点是什么 - 我在网站上有一个未经过身份验证的用户,我想让他做一些需要身份验证的操作(例如创建帖子).但是,在创建帖子的最后,我想向他显示登录模式窗口,让他使用社交oAuth提供程序登录并成功登录,让帖子获得批准等等.问题是这个从前端到不同域(社交提供商)的呼叫被阻止(CORS问题)并且我试图使用JSONP来克服障碍.试图设置JSONP调用花了我很多时间,最后我决定采用完全不同的方法:

在创建帖子的过程结束时,会创建一个cookie,关注信息所有必要细节中断的操作是什么.之后,显示登录模式.整个登录过程从服务器端完成,最后,当确认用户的身份时,重定向到初始页面.此外,检查cookie并根据数据,中断的操作继续成功执行,因为用户现在已经过身份验证.

@bryceadams再次感谢您的回答!

我想获得按钮单击事件的href属性.

<a v-on:click.prevent="func($event)" href="/user/all/2">
    <i class="fa fa-edit"></i>
    <span>Get Data</span>
</a>

Main.JS文件

new Vue({
el: 'body',

methods: {
    func: function (event) {
        element = event.target;

        console.log(element); // Output : Select span|i|a element

        href = element.getAttribute('href');
    },
}
});

目标事件不会选择元素.它选择单击的元素.

Vue-Resource发布请求:

this.$http.post(form.action, new FormData(form)).then(function (response) {
    FetchResponse.fetch(this, response.data)
})

请求作为内容类型发送:"application/json; charset = utf-8"但PHP Post不能显示任何数据.

设置标题Vue资源:

request.headers.set('Content-Type','');

但请求内容类型:",multipart/form-data; boundary = ---- WebKitFormBoundaryTsrUACAFB1wuhFOR"

在查询开头有一个逗号.

Jquery发布请求:

$.ajax({
    url     : form.action,
    type    : 'POST',
    data    : new FormData(form),
    success : function (reqData) {
        FetchResponse.fetch(ss, reqData)
    },
});

相同的查询与jQuery无缝协作.jQuery Content-Type:"multipart/form-data; boundary = ---- WebKitFormBoundaryTsrUACAFB1wuhFOR"

问题:https: //github.com/vuejs/vue-resource/issues/398

我有以下示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.2/mocha.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>

    <script>mocha.setup('bdd');</script>
    <script>
     "use strict";
     var assert = chai.assert;
     var should = chai.should();

     var vm = new Vue({
     data: {
         message: "Hello"
     },

     methods: {
         loadMessage: function() {
         this.$http.get("/get").then(
             function(value) {
             this.message = value.body.message;
             });
         },
     }
     });
     describe('getMessage', function() {
     let server;
     beforeEach(function () {
         server = sinon.fakeServer.create(); …

我正在构建一个表单，它需要通过加载表单时需要发出的 JSON 请求动态获取数据。我看不到加载此数据的方法。这里有人可以帮忙吗？

JSON 调用通过 vue-resource 完成，表单通过 vue-form-generator 生成。

export default Vue.extend({
  template,

  data() {
    return {
      model: {
        id: 1,
        password: 'J0hnD03!x4',
        skills: ['Javascript', 'VueJS'],
        email: 'john.doe@gmail.com',
        status: true
      },

      schema: {
        fields: [
          {
            type: 'input',
            inputType: 'text',
            label: 'Website',
            model: 'name',
            maxlength: 50,
            required: true,
            placeholder: companyList
          },
        ]
      },

      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      },
      companies: []
    };
  },

  created(){
    this.fetchCompanyData();
  },

  methods: {
    fetchCompanyData(){
      this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
        console.log(response.data.company);
        let companyList = response.data.company; // Use …

我vue-resource用来从服务器获取数据。用户需要具有JWT令牌才能获取正确的数据。如果令牌无效或已过期，则返回401状态。如果用户尝试访问禁止页面，则返回403。

我想捕获这些错误并适当地（全局）处理它们。这意味着，呼叫应完全由拦截器处理（如果为401、403）。

如何防止浏览器消息“未捕获（承诺）”并创建一些全局错误处理？我不想在每个电话上都有本地错误处理程序。

我有以下拦截器：

Vue.http.interceptors.push(function (request, next) {
    request.headers.set('Authorization', Auth.getAuthHeader());

    next(function (response) {
        if (response.status === 401 || response.status === 403) {
            console.log('You are not logged in or do not have the rights to access this site.');
        }
    });
});

Vue中的以下调用methods：

methods: {
    user: function () {
        this.$http.get('http://localhost:8080/auth/user').then(function (response) {
            console.log(response);
        });
    }
}

我的应用程序中有许多发帖请求。其中一些必须具有和额外的头，token我不确定如何附加它

到目前为止，我的代码是这样的。我正在检查是否有令牌，何时将其附加到标头，然后使用vue-resource post方法发出请求。

let headers = new Headers({'Content-Type': 'application/json;charset=utf-8'});

 if(token !== '') {
    headers.append('TOKEN', token);
  }

  return this.http.post(uri, data, headers)
         .then(this.extractData)
         .catch(this.handleError);

但这不附加 TOKEN

这是什么工作

this.http.interceptors.push(function(request) {
                request.headers.set('TOKEN', token);
            });

在...的地方 headers.append('TOKEN', token);

但是由于某种原因，它TOKEN不是针对某些请求而是针对所有请求推送标头

因此，当我使用令牌发出请求时-它工作正常，之后我又发出了没有令牌的请求，但它仍然添加了令牌。

有谁知道解决此问题的最佳方法是什么？

UPD如果我console.log(headers.get('TOKEN'))在执行headers.append('TOKEN', token);此操作，则会为我提供正确的价值。因此，我猜测发布请求本身被错误的标题调用。