//1.引入 : 在main.js 中引入该文件即可
//2.使用: axios.jsonp('地址').then(res => {
// console.log(res)
// } import axios from 'axios' axios.jsonp = (url, params) => {
// 1 根据 url 和params 拼接请求地址
url += '?'
for (let k in params) {
url += k + '=' + params[k] + '&'
}
// 2 拼接 callback
const callbackName = 'itcast_' + (new Date() - 0)
url += 'callback=' + callbackName
// 3 动态创建script标签
const script = document.createElement('script')
script.src = url
document.head.appendChild(script)
return new Promise((resolve, reject) => {
// 给window添加一个函数,就相当于全局函数
window[callbackName] = function (data) {
// data 就是 JSONP接口返回的数据
// 调用resolve获取数据
resolve(data)
// 删除掉添加给window的属性
delete window[callbackName]
// 移除 script 标签
document.head.removeChild(script)
}
})
}

01.在vue中通过 JSONP 方式来跨域的更多相关文章

  1. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  2. Vue中如何使用axios请求跨域数据

    1.axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净: 2.在使用axios发送请求时,服务器端设置 res.header("Access- ...

  3. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  4. jsonp 方式处理跨域前后端代码如何配合?

    JSONP(JSON with Padding)(json   数据填充)只支持GET请求 是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 跨域产生原因是浏览器的同源策略.( ...

  5. vue中axios访问Java后端跨域问题解决

    问题背景: 前后端分离,前端选用Vue,后端选用Java,vue编译出的静态页面采用ngix发布,在前端访问后端时出现跨域问题. 解决方法: 跨域的问题解决方法有好多种,这里是通过服务端解决,以下是代 ...

  6. 转换:使用vue-axios和vue-resource解决vue中调用网易云接口跨域的问题

    本人配置成功https://segmentfault.com/a/1190000011072725

  7. jsonp与cors跨域的一些理解(转)

    CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而这种访问是被同源策略所禁止的. ...

  8. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  9. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

随机推荐

  1. javascript闭包学习

    (function(){})()===>>>>函数会被立即执行function(){}是一个函数用括号包起来表示是函数表达式再加()表示函数自执行  如何理解闭包?1.定义和用 ...

  2. 【原创】大数据基础之Logstash(4)高可用

    logstash高可用体现为不丢数据(前提为服务器短时间内不可用后可恢复比如重启服务器或重启进程),具体有两个方面: 进程重启(服务器重启) 事件消息处理失败 在logstash中对应的解决方案为: ...

  3. A - Alice's Print Service ZOJ - 3726 (二分)

    Alice is providing print service, while the pricing doesn't seem to be reasonable, so people using h ...

  4. hololens Vuforia新时期的开发注意事项

    首先是导入的时候unity版本 HolotoolKit的版本 是否搭配.按照推荐的版本号去下载安装: 其次是在原本的相机的设置. View of field 大小设置为60,不然会造成页面的放大,然后 ...

  5. Deep face recognition: a survey v4

    http://www.cnblogs.com/shouhuxianjian/p/9789243.html

  6. <转>Go语言TCP Socket编程

    授权转载: Tony Bai 原文连接: https://tonybai.com/2015/11/17/tcp-programming-in-golang/ Golang的主要 设计目标之一就是面向大 ...

  7. 通过GIT_COMMIT进行代码回滚

    首先需要安装插件:conditional-buildstep A buildstep wrapping any number of other buildsteps, controlling thei ...

  8. 指定的 CGI 应用程序遇到错误,服务器终止了该进程。

    遇到这种错误只需要把这个项目的Cookies删除再重新启动就行了

  9. Continuity of arithmetic operations

    Arithmetic operations taught in elementary schools are continuous in the high level topological poin ...

  10. chrome 全屏 的两种方式

    新建脚本start.bat 自动全屏模式 "C:\Program Files\Google\Chrome\Application\chrome.exe" --kiosk http: ...