ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VUE中的跨域请求处理

2020-12-02 12:58:12  阅读:193  来源: 互联网

标签:vue resource 跨域 xxx js VUE jsonp Date 请求


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’ 这一段,或者直接通过这里完全修改默认的参数和默认值样式

 

标签:vue,resource,跨域,xxx,js,VUE,jsonp,Date,请求
来源: https://blog.csdn.net/mark_wolf/article/details/110477157

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有