//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. Spring Cloud 2-Config 分布式配置中心(七)

    Spring Cloud  Config  1.github配置 2.服务端配置 pom.xml application.xml Application.java 3.配置和命名 1. 配置加载顺序 ...

  2. cadence学习一------>介绍

    Allegro常用组件: 1.orcad capture cis------>>原理图 2.PCB editor----->>PCB 3.PAD designer------- ...

  3. MySQL5.7开启独立表空间参数innodb_file_per_table【原创】

    今天在线上某个系统发现MySQL数据库使用的是共享表空间,想修改为独立表空间,操作如下: #因为是主从结构,在从库修改测试,先关闭binlog SET SQL_LOG_BIN=; show varia ...

  4. python pymysql.err.InternalError: (1366, "Incorrect string value: '\\xE9\\x9F\\xA9\\xE6\\xA2\\x85...

    python3使用pymysql报错:   image.png 代码: #插入数据 try: sql = 'INSERT INTO classb (a_id,name,age) VALUES (6,& ...

  5. 收藏vue技术内幕

    http://hcysun.me/vue-design/art/7vue-reactive.html#observer-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

  6. 数据库六大约束用法:主键(primary key)、外键(foreign key)、非空(not null)、默认(default)、检查(check)、唯一(unique)

    1. 数据库有六大约束 主键(primary key) 外键(foreign key):被参照的键必须有唯一约束或是主键 非空(not null) 默认(default) 检查(check):orac ...

  7. 怎么在PDF上进行文字修改

    文件相信大家不论是工作中还是在学习生活中都会有遇到,有时候我们会遇到PDF文件中的文字有时候会有错误的时候,这个时候就需要对修改PDF文件上的文字,那么具体要怎么做呢,PDF文件需要借助软件才可以编辑 ...

  8. Angular结构型指令,模块和样式

    结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="use ...

  9. How does rt.jar works?

    转载自:https://stackoverflow.com/questions/30222702/how-does-java-link-lib-rt-jar-to-your-app-at-runtim ...

  10. 三、自动化测试平台搭建-django-如何用mysql数据库做web项目

    从这节开始到后面说的大概内容如下: 这里说的是Django做一个web项目的大概框架,从下篇具体说Django中的模型(查询..),视图(请求,响应,cookie,session..),模板(验证码, ...