浏览器同源策略

限制js向 其他域名发起请求，浏览器调试报错如下

JSONP 是一种解决方法

浏览器不会阻止带有src属性的标签发请求。所以可以常用的 <script src="xxxxx"></script> 来发请求

但是：返回的数据(字符串)需要符合js的语法。而服务端则专门做了支持。比如就返回 functionName(arg...)

这种方案就称为JSONP

例如某电视台查询最近节目单的接口就做了支持：

http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403
接口返回字符串：list({data:[xxxx......]}) 
这个字符串放到js里面就可以解析为可以执行的动作，并且参数包含了服务端想提供给客户端的数据，前端只要有list这个js函数就可以对获取到的数据自行处理

例：普通js 创建<scrript src='' ></script> 标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

</head>

<body>

    <h1>从后台获取结果</h1>

    {{ result }}

    <h1>前端js直接向其他域名发起get请求</h1>

    <input type="button" value="点击发起js请求" onclick="getContent();"/>

    <div id="container"></div>

</body>

    <script>

        function getContent(){

            //////////普通js发起jsonp////////////////

            // 利用js向查询天气接口发请求，接口返回的为js 的函数字符串，并且在函数中传参

            // 浏览器不会阻止 带有src 属性的标签发get请求，从而实现跨域请求

            let tag = document.createElement('script');

            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';

            document.head.appendChild(tag);

            // 向浏览器增加元素后，含有src属性会立即发送get请求到目标网站

            // 返回数据为符合js语法的函数：如list({data:[({data:xxx,,,,,,,）自己的js中必须提前创建好这个函数来获取数据做对应的处理

            // 标签增加获取到数据后，后立即删除此标签即可

            document.head.removeChild(tag);

        }

        // 创建支持jsonp的接口返回的函数

        function list(arg) {

            console.log(arg)

        }

    </script>

</html>

点击按钮发请求，查看获取到的数据

ajax 发起跨域请求

参数说明：

dataType: 'jsonp',  //数据类型
jsonp:'callback',   // 表示发送请求的时候传给后端url中的查询参数名
jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值
// jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list
最后发请求的实际url地址类似：http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1596885252309
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-2.2.3.min.js"></script>

</head>

<body>

    <h1>从后台获取结果</h1>

    {{ result }}

    <h1>前端js直接向其他域名发起get请求</h1>

    <input type="button" value="点击发起js请求" onclick="getContent();"/>

    <div id="container"></div>

</body>

    <script>

        function getContent(){

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',

                type:'POST',

                dataType: 'jsonp',

                jsonp:'callback',   // 表示发送请求的时候传给后端url中的查询参数名

                jsonpCallback: 'list' // 表示发送请求的时候传给后端url中的查询参数名对应的值

                // jsonp 和jsonpCallback 的值组合在url中 相当于在url中加了?callback=list

            })

        }

        // 创建支持jsonp的接口返回的函数

        function list(arg) {

            console.log(arg)

        }

    </script>

</html>

JSONP是个嘛玩意？解决跨域问题？的更多相关文章

  1. 详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  2. AJAX跨域问题解决方法（2）——JSONP解决跨域

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

  3. 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  4. JSONP解决跨域问题，什么是JSONP（转）

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

  5. Django使用jsonp和cors解决跨域请求问题

    1.使用jsonp的方式解决跨域请求的问题 我启动两个django项目,然后使用的端口不一样,在项目1中通过ajax发请求给项目2,然后接受项目2发送过来的数据 先看项目1的ajax的代码 $(&qu ...

  6. 手动创建script解决跨域问题（jsonp从入门到放弃）

    vue项目一般用axios代替jQuery发送ajax请求,但是不支持jsonp格式,需要安装jsonp的依赖包,这就很不爽了,能自己轻易实现的,为什么要引乱七八糟的插件.jsonp其实就是利用< ...

  7. JSONP方法解决跨域请求

    Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...

  8. JSONP、CORS解决跨域问题

    一.为什么会有跨域问题? 是因为浏览器的同源策略是对ajax请求进行阻拦了,但是不是所有的请求都给做跨域,对href属性都不拦截. 二.解决跨域问题的两种方式 JSONP CORS 三.JSONP 先 ...

  9. 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

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

  10. 非jsonp解决跨域问题

    1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import jav ...

随机推荐

  1. Insights直播回顾，对话专家，HMS Core 6创新能力解读

    HMS Core Insights第八期直播–对话专家,HMS Core 6创新能力解读,已于11月25日圆满结束,本期直播与小伙伴们一同了解了HMS Core 6在图形.媒体以及连接与通信领域推出的 ...

  2. GPG 使用指南

    加密与签名 在传输信息时,会面临两个典型的问题: 如何保证发出的消息,只能被预期的接收人获取? 如何保证收到的消息,确实由预期的发送人发出? 这两个问题不难理解.例如发送的邮件可能会被监听,诈骗分子可 ...

  3. uniapp如何在当前页面获取上个页面的变量、方法

    getCurrentPages() getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面. 注意: getCurrent ...

  4. Atcoder Grand Contest 008 E - Next or Nextnext（乱搞+找性质）

    Atcoder 题面传送门 & 洛谷题面传送门 震惊,我竟然能独立切掉 AGC E 难度的思维题! hb:nb tea 一道 感觉此题就是找性质,找性质,再找性质( 首先看到排列有关的问题,我 ...

  5. alpine切换源 安装慢 apk add很慢

    alpine切换源 安装慢 apk add很慢 阿里镜像 sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/reposit ...

  6. 准确率,召回率,F值,ROC,AUC

    度量表 1.准确率 (presion) p=TPTP+FP 理解为你预测对的正例数占你预测正例总量的比率,假设实际有90个正例,10个负例,你预测80(75+,5-)个正例,20(15+,5-)个负例 ...

  7. 详解工作流框架Activiti的服务架构和组件

    摘要:通过这篇文章,可以对工作流有一个基本的认识,为后续工作流框架Activiti的学习打下坚实的基础. 本文分享自华为云社区<BPMN工作流的基本概念!详解工作流框架Activiti的服务架构 ...

  8. lua5.4 beta中的to-be-closed变量的用法

    对应目前最新lua5.4 beta版本:2019-10-09发布 这个功能之前修改过两次语法,当前的语法不出意外将会是最终决定了,目前还没有最新的中文资料,所以我来这里发一下. 先介绍下这个功能: 被 ...

  9. 巩固java第七天

    巩固内容: HTML 属性 属性是 HTML 元素提供的附加信息. HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比 ...

  10. Android系统编程入门系列之硬件交互——多媒体麦克风

    在多媒体摄像头及相关硬件文章中,对摄像头的使用方式需要区分应用程序的目标版本以使用不同的代码流程,而与之相比,麦克风硬件的使用就简单多了. 麦克风及相关硬件 麦克风硬件在移动设备上作为音频的采集设备, ...