vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件。jsonp其实就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。

那我就直接自己创建script就好了,还用你jsonp干什么。生死看淡,那就试试呗;

mounted是vue的生命周期中的钩子,用其他库开发的,直接用mounted内的部分即可。

    mounted(){
//axios不支持jsonp,就直接用创建js解决跨域问题
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://api.map.baidu.com/location/ip?coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';
document.body.appendChild(script);
}

上文的代码看起来没错,但是报错了

Uncaught SyntaxError: Unexpected token :

因为该script的内容为{},前后均无分号;script.src添加个  callback=null  ,就不报错了

script.src = 'http://api.map.baidu.com/location/ip?callback=null&coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';

那么又有个新问题,我跨域请求来的数据怎么保存下来,没错就是用callback调用函数

mounted(){
//axios不支持jsonp,就直接用创建js解决跨域问题
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://api.map.baidu.com/location/ip?callback=show&coor=bd09ll&ak=zdID84p3fMRLNHzegSlgSbe9';
document.body.appendChild(script);
window.show = function (json) {//不添加window,callback找不到
console.log(json)
}
},

关于回调函数要强调的是,不添加window,callback是找不到的,因为callback的this是window,mounted中函数的this是vue实例。

今天要分享的就是这些,啦啦啦,晚上回学校领毕业证去。我的大学接近尾声了。

手动创建script解决跨域问题(jsonp从入门到放弃)的更多相关文章

  1. 解决跨域问题-jsonp&cors

    跨域的原因 浏览器的同源策略 同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 指的是从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子:比如一个恶意网站的页面通过iframe嵌入 ...

  2. 动态创建 script 实现跨域请求数据

    动态创建script标签 (由事件触发) 在我们需要请求数据的时候我们就可以动态的创建 script 标签 src设置为我们需要请求数据的地址 另外我们可以附加参数 ?后面附加参数 例如 :?参数=1 ...

  3. 学习AJAX必知必会(4)~同源策略、解决跨域问题(JSONP、CORS)

    一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...

  4. 动态Script标签 解决跨域问题

     动态Script 解决跨域问题 1.动态创建scriptcreateScript : function(src){ var varScript = document.createElement(&q ...

  5. jquery跨域解决方案JSONP

    1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...

  6. ajax解决跨域

    http://www.cnblogs.com/sunxucool/p/3433992.html 为什么会出现跨域跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相 ...

  7. 如何用Nginx解决跨域问题

    一. 产生跨域的原因 1.浏览器限制 2.跨域 3.XHR(XMLHttpRequest)请求 二. 解决思路 解决跨域有多重,在这里主要讲用nginx解决跨域 1.JSONP 2.nginx代理 3 ...

  8. AJAX跨域问题解决方法(2)——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  9. JSONP解决跨域问题,什么是JSONP(转)

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

随机推荐

  1. Windows+MyEclipse+MySQL【连接数据库报错caching_sha2_password】

    在MyEclipse中打开[窗口]->[显示视图]-> MyEclipse Database Browser -> (图片里倒三角)New.... ①Driver template: ...

  2. POJ 2894

    #include<iostream> #define MAXN 1005 using namespace std; int a[MAXN]; int main() { //freopen( ...

  3. (转)Python 日志处理(三) 日志状态码分析、浏览器分析

    原文:https://www.cnblogs.com/i-honey/p/7791564.html 在企业中,从日志中提取数据进行分析,可以帮助企业更加了解用户行为,用户最感兴趣的产品或者内容,分析得 ...

  4. tensorflow进阶篇-4(损失函数2)

    Hinge损失函数主要用来评估支持向量机算法,但有时也用来评估神经网络算法.下面的示例中是计算两个目标类(-1,1)之间的损失.下面的代码中,使用目标值1,所以预测值离1越近,损失函数值越小: # U ...

  5. Spring的JavaMail实现异步发送邮件

    具体背景就不说了,可以网上搜索相关知识,或者直接看Sping MailSender的官坊网页.这里就直接实战了(Java实现异步发送电子邮件,包含中文无乱码). Maven: <dependen ...

  6. 一口一口吃掉Volley(三)

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/02/17/一口一口吃掉Volley(三)/ 学习了一口一口吃掉Volley(二)之后,你应该已经学会了如何 ...

  7. JavaScript基础(一)概述

    JavaScript 概述 JS作用 验证表单(以前的网速慢) 页面特效(PC端的网页效果) 移动端(移动web和app) 异步和服务器交互(AJAX) 服务端开发(nodejs) 语言类型 js是一 ...

  8. 单线程实现同时监听多个端口(windows平台c++代码)

    前言 多年前开发了一套网络库,底层实现采用IOCP(完成端口).该库已在公司多个程序中应用:经过多次修改,长时间检验,已经非常稳定高效. 最近把以前的代码梳理了一下,又加进了一些新的思路.代码结构更加 ...

  9. DataSet 多表关系

    protected void Page_Load(object sender, EventArgs e) { string connectionString = @"Data Source= ...

  10. Jmeter接口测试动态传参——动态获取token值

    先添加一个线程组,然后在线程组下添加HTTP Request 环境变量: 线程组下添加User Defined Variables 调用变量:${变量名} 添加结果树: 记录登录后的token: 获取 ...