VUE中的跨域请求处理

VUE中的跨域请求处理

超新人使用vue，不习惯。由于项目中需要从js转到vue使用，直接使用jquery涉及到其他东西，后续麻烦。再学习尝试使用过程中查了不少本站以及其他站不少资料，故部分内容有所借鉴。

尝试了axios的跨域请求，非常麻烦，需要服务端支持；如果不从服务端处理的情况下，需要本地创建转发代理进行处理。另外一个方法就是日常使用的jsonp了，好东西呀。

虽然说vue-resource不再更新，但耐不住它有jsonp嘛。

1.安装

cnpm i vue vue-resource --save-dev   //本人用的cnpm，cnpm和npm混用容易出现异常，so建议非特殊情况采用其中一个源

2.配置使用

main.js 导入

import VueResource from 'vue-resource'

Vue.use(VueResource)  // 这个要放在new vue（）后面

3. vue文件中使用

比如我这里的helloworld.vue

    <button v-on:click="testRes">testResource</button>  //加个button

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    testRes () {
      this.$http.jsonp('http://xxx.xxx.xxx/setevent/xxx', {
        params: {
          'type': 1,
          'usertype': 'agent',
          'user': 2875,
          'orgidentity': 'helloworld',
          'list': '',
          'pwdtype': 'plaintext',
          'password': 6666,
          'deviceexten': '',
          'pushevent': 'no',
          _: Date.parse(new Date())

        }
      }).then(function (data) {
        alert(JSON.stringify(data.body))
      }
      ).catch(function (response) {
        console.log(response)
      })
    }
  }
}
<script>

4.其他

由于jsonp参数化，请求的时候回调为callback=_jsonpxxxxxxx

回调函数参数名可以通过option里面设置   jsonp:'xxxx' 来处理

{
        params: {
          'type': 1,
          'usertype': 'agent',
          'user': 2875,
          'orgidentity': 'helloworld',
          'list': '',
          'pwdtype': 'plaintext',
          'password': 6666,
          'deviceexten': '',
          'pushevent': 'no',
          _: Date.parse(new Date())
        }
        jsonp:'mycallback'
      }

则请求的时候变为  mycallback=_jsonpxxxxx

参数值可以通过修改构造方法修改

vue里面可以修改 node_modules/vue-resource/dist/vue-resource.esm.js

911 行 ‘_jsonp’ 这一段，或者直接通过这里完全修改默认的参数和默认值样式