精华内容
下载资源
问答
  • 真-vue使用jsonp跨域

    2020-11-16 21:15:50
    vue使用jsonp跨域 1.安装依赖 npm install jsonp 2.在vue文件中使用 import originJSONP from 'jsonp' //后端接口返回的数据为字符串 //ckp({"cityid":"101190201","date":"2020-11-14"}}) //该字符串实际是...
    vue使用jsonp跨域

    1.安装依赖

    npm install jsonp

    2.在vue文件中使用

    import originJSONP from 'jsonp'
    
    //后端接口返回的数据为字符串
    //ckp({"cityid":"101190201","date":"2020-11-14"}})
    //该字符串实际是把数据用ckp()函数包裹
    //ckp就是前后端约定的jsonP前缀
    let url4 = 'https://www.xxxapi.com/api?callback=ckp';
    let opts={
        prefix:'ckp'
    }
    //发起jsonP请求
    originJSONP(url4, opts, (err, data) => {
        console.log('????????????????===')
        if (!err) {
            console.log(data);
            this.weatherJson = data;
        } else {
            console.log(err)
        }
    });

     

    3.originJSONP函数介绍

    originJSONP(url, opts, fn),有3个参数 
    1.fn 回调方法,用es6 Promise
    2.url (String) 服务器端数据接口地址
    3.opts (Object) 一般只需关注param即可 
     3.1 param (String) 默认是callback,这是与后端约定的参数名称,也可以随便定义,只要前后端统一
     3.2 timeout (Number) 请求超时时间,默认是6000ms
     3.3 prefix (String) callback值的前缀,默认是__jp
     3.4 name (String) 指定全局注册的回调方法名,一般不会用到,因为默认是prefix+自增数字
    展开全文
  • Vue vue-jsonp 跨域

    2020-04-24 00:35:06
    vue-jsonp ● npm 安装 vue-jsonp npm install vue-jsonp --save npm i vue-jsonp ● 用法 静态函数: Vue.jsonp(url, dataObj, timeout) 在Vue组件中: this.$jsonp(url, dataObj, timeout) ● src/main.js 中添加...

    vue-jsonp

    ● npm 安装 vue-jsonp

    npm install vue-jsonp --save
    npm i vue-jsonp

    ● 用法
    静态函数: Vue.jsonp(url, dataObj, timeout)
    在Vue组件中: this.$jsonp(url, dataObj, timeout)

    ● src/main.js 中添加

    import Vue from 'vue'
    import VueJsonp from 'vue-jsonp'
    Vue.use(VueJsonp)

    ● 其它组件中基本使用方法【在任意.vue文件中使用】

    /* 方式1【在Vue组件中】 */
    var param = {
      header: { "content-type": "application/xml" }
      callbackQuery: "callbackParam",
      callbackName: "jsonpCallback"
    }
    this.$jsonp(`http://api.com:9093/api/v1/sso/token`, param).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    
    /* 方式2【在Vue组件中】 */
    this.$jsonp(`http://api.com:9093/api/v1/sso/token`, {callbackQuery: "callbackParam", callbackName: "jsonpCallback" }).then((json) => {
      // 返回的jsonp数据不会放这里,而是在 window.jsonpCallback
      console.log(json)
    }).catch(err => {
      console.log(err)
    })
    
    /* 方式3【在Vue组件中】 */
    methods: {
      handleLogin() {
        this.$jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      }
    }

    ● 静态函数【在 src/store/modules/user.js 文件中使用】

    import Vue from 'vue'
    import { login, logout, getInfo, getSsoToken } from '@/api/user'
    import { getToken, setToken, removeToken } from '@/utils/auth'
    import router, { resetRouter } from '@/router'
    
    const state = {
      token: getToken(),
      name: '',
      avatar: '',
      introduction: '',
      roles: []
    }
    
    const mutations = {
      SET_TOKEN: (state, token) => {
        state.token = token
      },
      SET_INTRODUCTION: (state, introduction) => {
        state.introduction = introduction
      },
      SET_NAME: (state, name) => {
        state.name = name
      },
      SET_AVATAR: (state, avatar) => {
        state.avatar = avatar
      },
      SET_ROLES: (state, roles) => {
        state.roles = roles
      }
    }
    
    const actions = {
      getSsoToken() {
        return new Promise((resolve, reject) => {
          console.log(`Ln 105 /src/store/modules/user.js `)
          Vue.jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {
            const { data } = res
            console.log(`Ln 108 ${JSON.stringify(res)}`)
            if (!data) {
              reject('Verification failed, please Login again.')
            }
            const { token } = data
            console.log(`Ln 85 ${token}`)
            if (!token || token.length <= 0) {
              console.log(`Ln 113 /src/store/modules/user.js 没有token`)
              // reject('getSsoToken: token must be a non-null array!')
            }
            resolve(data)
          }).catch(error => {
            console.log(`Ln 125 /src/store/modules/user.js ${error}`)
            reject(error)
          })
        })
      }
    }
    
    export default {
      namespaced: true,
      state,
      mutations,
      actions
    }
    


    ● 静态函数【在 src/permission.js 文件中使用】

    import router from './router'
    import store from './store'
    import { Message } from 'element-ui'
    import NProgress from 'nprogress' // progress bar
    import 'nprogress/nprogress.css' // progress bar style
    import { getToken } from '@/utils/auth' // get token from cookie
    import getPageTitle from '@/utils/get-page-title'
    import Vue from 'vue'
    
    NProgress.configure({ showSpinner: false }) // NProgress Configuration
    
    const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
    
    router.beforeEach(async(to, from, next) => {
      NProgress.start()
    
      document.title = getPageTitle(to.meta.title)
    
      const hasToken = getToken()
    
      /* 【方式1】调用 src/store/modules/user.js 文件中 getSsoToken() 方法 */
      const sso = await store.dispatch('user/getSsoToken')
      console.log(`Ln 87 ${JSON.stringify(sso)}`)
      if (sso.token) {
        console.log(`Ln 89 有 ssotoken`)
      } else {
        console.log(`Ln 91 没有 ssotoken`)
        // next(`/login?redirect=${to.path}`)
        // window.location.href = `http://jy.management.com:9093/#/login?redirect=${window.location}${to.path}`
      }
    
      /* 【方式2】直接调用 jsonp */
      Vue.jsonp('http://api.com:9093/api/v1/sso/token', { callbackName: 'callback' }).then(res => {
        console.log(`Ln 100 ${JSON.stringify(res)}`)
      }).catch(err => {
        console.log(err)
      })
    
      if (whiteList.indexOf(to.path) !== -1) {
        // in the free login whitelist, go directly
        next()
      }
    })
    
    router.afterEach(() => {
      // finish progress bar
      NProgress.done()
    })
    

    ● 后台方法
    跨域访问【注意:只支持get请求,不支持post请求
    ● JQuery对于Ajax的跨域请求有两类解决方案,都是只支持get方式。分别是JQuery的 ajax jsonp格式和jquery.getScript方式。
    ● 要使用跨源请求发送凭据,客户端必须设置为:withCredentials: true
    ● 后端需要添加一个解决跨域方位的过滤器
    API接口

    [HttpGet("token")]
    public IActionResult GetCookie()
    {
        string token = string.Empty;
        HttpContext.Request.Cookies.TryGetValue("center-token", out token);
        LogUtils.GetInstance().Info("Ln 24 " + token);
        var user = new SsoVo { token = token };
        return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200", data = new { token = token, ticket = "1234567890abcd" } }) + ")");
    }
    
    [HttpGet("LoginJsonp")]
    public IActionResult LoginJsonp()
    {
        return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200" }) + ")");
    }
     
    [HttpGet("GetTicket")]
    public IActionResult GetTicket()
    {
        HttpContext.Response.Cookies.Append("password", "123456");
        HttpContext.Response.Cookies.Append("time", "abcd");
        return Ok("callback(" + JsonConvert.SerializeObject(new { code = "200", data = new { ticket = "1234567890abcd" } }) + ")");
    }
     
    [HttpGet("GetTicketNew")]
    public IActionResult GetTicketNew()
    {
        return Content("jsonpscall(" + JsonConvert.SerializeObject(new { code = "200", data = new { ticket = "1234567890abcd" } }) + ")");
    }
    

    *
    *
    *
    *
    *
    *

    展开全文
  • vuejsonp跨域小栗子

    千次阅读 2017-11-18 18:01:27
    跨域问题早就想解决了,趁着周末,上网找了点资料,看到网上有一个封装好的插件很好用, 插件地址如下: //首先npm install jsonp... <h1>jsonp跨域小栗子 </template><script> import thisisjsonp from 'jsonp';

    跨域问题早就想解决了,趁着周末,上网找了点资料,看到网上有一个封装好的插件很好用,
    插件地址如下:
    //首先npm install jsonp安装此插件
    写了个小栗子,代码如下:

    
    <template>
      <div>
       <h1>jsonp跨域小栗子</h1>
      </div>
    </template>
    
    <script>
     import thisisjsonp from 'jsonp'; 
         export default {
            created(){
             this.getdata();
            },
            methods:{
               getdata(){
               //此处的url是完整的地址,可以改进下重新封装此url
                  var url='https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg?g_tk=223259203&jsonpCallback=hotSearchKeysmod_top_search&loginUin=1234567&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0&jsonpCallback=__jp1';
                  var param={
                   param:'jsonpCallback'//此处的jsonpCallback是对应的回调函数名称
                  };
                  thisisjsonp(url,param,(err,data)=>{
                  if(!err){
                    console.log(data)
                  }
                  else{
                    console.log(err)
                  }
               })
             }           
         }
    }
    </script>
    <style scoped>
    
    </style>
    展开全文
  • 所以在vue的开发中就需要使用jsonp来实现了。下面是我最近爬的一些小坑,希望看到的人有所帮助。 1。安装vue-jsonp npm install vue-jsonp --save 2.在src文件夹中新建一个common文件夹 -&g...

    前言:自己在做demo的时候需要数据的时候又不想自己写数据,只能到网上找别人的现成的数据做测试,但是找到好多的api都是需要跨域才能访问成功的。所以在vue的开发中就需要使用jsonp来实现了。下面是我最近爬的一些小坑,希望看到的人有所帮助。

    1。安装vue-jsonp

     npm install vue-jsonp --save

    2.在src文件夹中新建一个common文件夹 ->js文件夹 ->jsonp.js

    jsop.js

    import originJsonp from 'jsonp'
    
    export default function jsonp(url, data, option) {
        //url链接里面符号的处理
        url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
    
        return new Promise((resolve, reject) => {
            originJsonp(url, option, (err, data) => {
                if (!err) {
                    resolve(data)
                } else {
                    reject(err)
                }
            })
        })
    }
    
    export function param(data) {
        let url = ''
        for (var k in data) {
            let value = data[k] !== undefined ? data[k] : ''
            url += '&' + k + '=' + encodeURIComponent(value)
        }
        return url ? url.substring(1) : ''
    }

    3.现在就是写我们自己要访问的api公共类了 src->api文件夹(新建)->config.js

     3.1 config.js

    //公共
    export const commonParams = {
        g_tk: 5381,
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0,
        format: 'jsonp'
    }
    
    export const options = {
        param: 'jsonpCallback'
    }
    
    export const ERR_OK = 0;

     3.2 recom.js(自己需要调用的)

    import jsonp from 'common/js/jsonp'
    import { commonParams, options } from './config'
    
    
    // 获取推荐页面数据 接口
    export function getRecom() {
        const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg';
    
        let data = Object.assign({}, commonParams, {
            platform: 'h5',
            uin: 0,
            needNewCode: 1
        })
        return jsonp(url, data, options)
    }

     

    4.差不多准备工作都做完了就能开始调用jsop来调取数据了

     reom.vue

    <template>
       <div class="recom">
            <!-- 1.轮播图 -->
        <swiper class="banner" :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide v-for="(item,index) in swiperOption.silideData" :key="index">
            <a :href="item.linkUrl">
              <img :src="item.picUrl" :alt="item.picUrl">
            </a>
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <!-- 2.电台 -->
        <div class="mod_twocol_list">
          <h1 class="list_title">电台</h1>
          <ul class="list_container">
            <li class="js_play_radio" v-for="list in radioList" :data-id="list.radioid">
                <a href="javascript:;" class="list_main">
                    <div class="list_media">
                      <img :src="list.picUrl" alt="">
                      <span class="icon icon_play"></span>
                    </div>
                    <div class="list_info">
                      <h2 class="list_tit tit_two_row">{{list.Ftitle}}</h2>
                    </div>
                </a>
            </li>
          </ul>
        </div>
        <!-- 热门歌单 -->
        <div class="mod_twocol_list mod_twocol_list_special">
          <h2 class="list_title">热门歌单</h2>
          <ul class="list_container">
            <li data-tjname="recom_songlist" v-for="songlist in songList" >
             <a href="javascript:;" class="list_main js_gotaoge">
               <div class="list_media"> 
                 <img :src="songlist.picUrl" alt="">
                 <span class="icon icon_play"></span>
               </div>
               <div class="list_info">
                  <h2 class="tit_two_row">{{songlist.songListDesc}}</h2>
                <p class="list_text">{{songlist.songListAuthor}}</p>
                </div>
             </a>
             <p>{{songlist.accessnum}}</p>
            </li>
          </ul>
        </div>
       </div>
    </template>
    
    <script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";//轮播组件
    import { getRecom } from "api/recom";
    import { ERR_OK } from "api/config";
    export default {
      data() {
        return {
          swiperOption: {
            // banner轮播配置和数据
            autoplay: true,
            pagination: {
              el: ".swiper-pagination"
            },
            silideData: [] // 数据
          },
          radioList: [],
          songList: []
        };
      },
      components: {
        swiper,
        swiperSlide
      },
      created() {
        this._getRecom();
      },
      // computed: {
      //   swiper() {
      //     return this.$refs.mySwiper.swiper;
      //   }
      // },
      methods: {
        _getRecom() {
          getRecom().then(res => {
            if (res.code === ERR_OK) {
              this.swiperOption.silideData = res.data.slider; // 轮播数据
              this.radioList = res.data.radioList;
              this.songList = res.data.songList;
              console.log(this.swiperOption.silideData);
              console.log(this.songList.accessnum);
            }
          });
        }
      }
    };
    </script>
    
    <style lang="less">
    @import url("swiper/dist/css/swiper.css");//轮播swiper的自带css
    .recom {
      height: 100%;
      width: 100%;
    }
    .banner {
      a,
      img {
        display: block;
        height: inherit;
        margin: 0 auto;
        width: 100%;
      }
      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        border-radius: 6px;
        opacity: 0.2;
        transition: all 0.35s;
      }
      .swiper-pagination-bullet-active {
        opacity: 1;
        // width: 20px;
        border-radius: 6px;
        background: #fff;
      }
    }
    .mod_twocol_list {
      margin: 14px 10px 0 10px;
      .list_title {
        font-size: 16px;
        color: #000;
        margin-bottom: 11px;
        font-weight: normal;
      }
      .list_container {
        overflow: hidden;
        margin-right: -8px;
        li {
          float: left;
          width: 50%;
          padding-right: 8px;
          margin-bottom: 10px;
          overflow: hidden;
          .list_media {
            position: relative;
            margin-bottom: 5px;
          }
          .list_info {
            padding: 0 7px 5px;
            color: #000;
            .list_tit {
              height: 36px;
              line-height: 18px;
              font-size: 14px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: normal;
            }
          }
          img {
            width: 100%;
          }
        }
        .list_main {
          display: block;
          background: #fff;
        }
      }
    }
    .icon_play {
      position: absolute;
      display: block;
      z-index: 10;
      height: 24px;
      bottom: 5px;
      right: 5px;
      width: 24px;
      background-position: 0 0;
      background-image: url("../../assets/img/list_sprite.png");
      background-repeat: no-repeat;
      background-size: 24px 60px;
    }
    .tit_two_row {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: normal;
    }
    .list_text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: normal;
        font-size: 12px;
        margin-top:5px;
    }
    </style>

     

    转载于:https://www.cnblogs.com/chenmeng1314/p/7941938.html

    展开全文
  • 最近在熟悉VUE前端框架,与后台NodeJS的相关知识,现遇到解决不同源跨域问题。记录如下 NodeJS版本为v8.9.0 前端vue使用vue-cli脚手架搭建,版本为2.9.2 后台用的Express框架,版本为先是后台Express框架部分。...
  • 主要介绍了Vue2.0 vue-source jsonp 跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 原生js实现jsonp跨域 注意jsonp跨域需要后台支持。 实现效果 这里是用的必应每日壁纸api 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&...
  • vue引入vue-jsonp实现跨域的方法

    千次阅读 多人点赞 2020-10-22 16:43:03
    一、vue-jsonp实现跨域的方法 第一步: 添加依赖npm install vue-jsonp --save 第二步: 在vue cli项目main.js中添加 import{VueJsonp}from'vue-jsonp' // 网上很多博客引用不加{},会报错 Vue.use(VueJsonp)...
  • vue-jsonp跨域请求原理 1. 安装vue-jsonp 2. 在 main.js中导入vue-jsonp 3. 在 .vue 文件中使用 vue-jsonp的官网https://www.npmjs.com/package/vue-jsonp vue-jsonp跨域请求原理 ajax请求受同源策略...
  • springboot jsonp 跨域请求,springboot使用jsonp跨域 ================================ ©Copyright 蕃薯耀 2020-11-25 https://www.cnblogs.com/fanshuyao/ * spring框架4.1加入jsonp配置,在5.1时,删除不再...
  • vue jsonp跨域请求资源

    2019-12-27 16:44:02
    最近开发项目中爬了一个坑,关于vue-jsonp跨域请求资源的小问题,网上一搜一大堆,但是试了都不是很理想,简单点贴一下我的代码吧。 首先我们要先 npm install jsonp,然后封装一步jsonp.js 下面的是jsonp.js ...
  • vue jsonp跨域

    2018-11-23 10:09:39
    由于浏览器的同源策略,我们在碰到一些需要跨域的请求时需要一定的方式 1.首先在npm环境下下载jsonp npm install jsonp --d 2.自定义js文件对jsonp进行封装 import orginJSONP from 'jsonp' export default ...
  • npm install vue-jsonp --save 2、src/main.js中添加: import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 3、其它组件中基本使用方法: let obj = { 'location':item.point.lat+...
  • 下面小编就为大家分享一篇基于vue-resource jsonp跨域问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue项目中jsonp跨域获取qq音乐首页推荐问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue使用jsonp跨域访问数据

    千次阅读 2018-03-22 10:38:55
    1.首先在src目录下建立一个api目录,下面建立cofing.js和recommend.js文件,在config.js文件中是一些跨域访问的参数:export const commonParams = { source: 'wap' //访问时的公共参数 } export const options = {...
  • ajax 跨域请求 vue-resource jsonp跨域

    万次阅读 多人点赞 2016-12-24 14:11:21
    ajax 跨域请求 vue-resource jsonp跨域最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点...
  • vue-resource j直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请sonp跨域最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在...
  • vue-jsonp 第一步: npm install vue-jsonp --save 第二步: 在main.js中 ...import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp ... 在任意.vue文件中使用 methods中 vueJsonpShopList(params) { thi...
  • vue.js jsonp跨域详解

    2018-12-20 00:09:11
    自己的随手笔记,分享给大家,如果...jsonp 跨域 下列就以QQ音乐接口为例: 1.首先vue安装 jsonp   2.引入封装的jsonp.js文件 import JSONP from 'jsonp' export default function jsonp(url, data, opt...
  • 原生js实现jsonp跨域 jquery 实现jsonp跨域 vue实现http跨域请求 在不同域名下请求数据就会产生跨域问题 同源:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题 ajax的同源策略...
  • 前言 连的是腾讯地图的地点云api 报错 Uncaught (in promise) {statusText: "Request Timeout", status: 408} 解决 加个参数 output: ‘jsonp’ ... key: process.env.VUE_APP_MAP_KEY, table_id: '605
  • vue工程中使用vue-jsonp组建完成跨域请求,并介绍了过程中遇到的回调函数undefined问题的原理以及解决方式
  • 写在前面:jsonp跨域请求的一种方式,依托于script的src属性,达到跨域的目的,只能发get请求 什么是跨域?不同的协议,不同的ip,不同的端口,只要是其中的一种都属于跨域请求。 首先用node起个服务 serve.js...
  • npm install vue-jsonp --save   2、src/main.js中添加: import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp)   3、其它组件中基本使用方法: this.$jsonp(rootApi+'/company/Info'', 传...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,499
精华内容 2,999
关键字:

vue使用jsonp跨域

vue 订阅