1. //1.引入 : 在main.js 中引入该文件即可
  2. //2.使用: axios.jsonp('地址').then(res => {
  3. // console.log(res)
  4. // }
  5.  
  6. import axios from 'axios'
  7.  
  8. axios.jsonp = (url, params) => {
  9. // 1 根据 url 和params 拼接请求地址
  10. url += '?'
  11. for (let k in params) {
  12. url += k + '=' + params[k] + '&'
  13. }
  14. // 2 拼接 callback
  15. const callbackName = 'itcast_' + (new Date() - 0)
  16. url += 'callback=' + callbackName
  17. // 3 动态创建script标签
  18. const script = document.createElement('script')
  19. script.src = url
  20. document.head.appendChild(script)
  21. return new Promise((resolve, reject) => {
  22. // 给window添加一个函数,就相当于全局函数
  23. window[callbackName] = function (data) {
  24. // data 就是 JSONP接口返回的数据
  25. // 调用resolve获取数据
  26. resolve(data)
  27. // 删除掉添加给window的属性
  28. delete window[callbackName]
  29. // 移除 script 标签
  30. document.head.removeChild(script)
  31. }
  32. })
  33. }

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. redis缓存雪崩、缓存穿透、数据库和redis数据一致性

    一.缓存雪崩 回顾一下我们为什么要用缓存(Redis):减轻数据库压力或尽可能少的访问数据库. 在前面学习我们都知道Redis不可能把所有的数据都缓存起来(内存昂贵且有限),所以Redis需要对数据设 ...

  2. nginx unit PHP

    2018-12-26 14:20:33 星期三 综述: nginx unit php 的关系: nginx -> 转发请求到 8300端口 -> unit 转发 8300 收到的请求 -& ...

  3. Asp.Net Core配置Swagger

    本文主要参考:Using Swagger with ASP.net Core 1.创建WebApi项目 本文使用ASP.Net Core Web API项目模板演示Swagger到使用,首先创建Web ...

  4. Springboot2新特性概述

    官方说明: https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.0-Release-Notes 起码 JDK 8 和支持 ...

  5. vmware克隆虚拟机后无法联网

    1.基础知识: 就算是克隆的系统,但是由于物理地址改变了,导致rules文件进行了重新绑定 网卡会从eth0变成eth1(逐渐+1),而且mac地址和uuid也会有变化. 2.解决方法: 2.1编辑e ...

  6. (转)python 开发 sqlite 绝对完整

    '''SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说 没有独立的维护进程,所有的维护都来自于程序本身. 在python中,使用sqlite3创建数据库的连接,当我们指定的数据库文件不 ...

  7. C# 高级编程01----.Net基础介绍

    一.C#与.Net 的关系 1)C#语言 1. C#是一种简洁.类型安全的面向对象语言,可以使用C#语言创建可以在.Net Framework上运行的应用程序 2. C# 语言功能取决于.Net 的功 ...

  8. YARN配置

    环境搭建 mapred-site.xml <configuration> <property> <name>mapreduce.framework.name< ...

  9. JS中this指向问题相关知识点及解析

    概括:this指向在函数定义的时候是无法确定的,只有在函数调用执行的时候才能确定this最终指向了谁,this最终指向的是调用它的对象(常见的说法,后面有小小的纠正): 例1: 图中的函数fn1其实是 ...

  10. 小米Note 2简单卡刷开发版启用root超级权限的步骤

    小米的机器不同手机型号一般MIUI官方论坛都提供两个不同版本,分别为稳定版和开发版,稳定版没有提供Root超级权限管理,开发版中就开启了Root超级权限,较多时候我们需要使用的一些功能强大的软件,都需 ...