跨域问题-jsonp
前端
同源策略并不会拦截静态资源请求，那么就将接口伪装成资源，然后后端配合返回一个前端预定义的方法调用，将返回值放入调用该函数的形参即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//前端预定义
function getName(rep){
document.write(rep.name)
console.log(rep)
}
</script>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://localhost:8082?callback=getName"></script>
</body>
</html>
后端
后端以node为例，其他语言大同小异
var http = require("http");
const url = require("url");
http.createServer(function (request, response) {
let params = url.parse(request.url,true);
// 返回一段（js）代码【本质是字符串类型】，填充到html中那个script标签的src中。
response.end(params.query.callback + `(${JSON.stringify({name:"abc"})})`);
}).listen(8082);
效果
补充
当然了，如果你觉得麻烦，你可以用jq的jsonp或者其他封装ajax支持jsonp的插件，效果一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let url='http://localhost:8082?callback=getName';
$.ajax({
url: url,
type: "get",
dataType: "jsonp",
jsonpCallback: "getName",
success: function (rep) {
document.write(rep.name)
console.log(rep) }
})
</script>
</head>
<body></body>
</html>
跨域问题-jsonp的更多相关文章
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- 浏览器同源策略，跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- 跨域Ajax -- jsonp和cors
跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
- jquery跨域解决方案JSONP
1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- JS跨域：jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- 【记录】ajax跨域问题jsonp正确的使用方式
最近遇到ajax请求跨域问题,解决方案用jsonp,现记录如下: //跨域请求jsonp封装 function doJsonPostCallBack(type, url, data,async, ca ...
- cors跨域和jsonp劫持漏洞 和 同源策略和跨域请求解决方案
cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- 跨域的jsonP
1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问. 2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式 3.jsonp的get与p ...
随机推荐
- Cognos组织架构介绍
Cognos只是一个工具,说到Cognos相信大部分人都知道BI(商业智能,Business Intelligence). Cognos也是属于SOA架构,面向服务的体系结构,是一个组件模型,它将应用 ...
- 移动端ios中click点击失效
原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...
- [LintCode] 第一个错误的代码版本
/** * class VersionControl { * public: * static bool isBadVersion(int k); * } * you can use VersionC ...
- jquery remove() detach() empty()三种方法的区别
remove方法把事件删除掉了,数据并没有删除 detach方法保存了事件和数据 empty方法保留了元素本身,移除子节点,删除内容 举例: <!DOCTYPE html><html ...
- jQuery UI dialog 参数说明
前段时间碰到个问题 jquery UI dialog弹出层 弹出多个层是 比如弹出两个层A和B B层如果显示的数据表格太大,伸到了A层的外面,那伸到A层之外的部分就看不到了,因为B层是在A层上弹出的 ...
- HDU 4417 Super Mario（线段树）
Super Mario Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- CORBA（Common Object Request Broker Architecture,公共对象请求代理体系结构，通用对象请求代理体系结构）是由OMG组织制订的一种标准的面向对象应用程序体系规范
CORBA(Common Object Request Broker Architecture,公共对象请求代理体系结构,通用对象请求代理体系结构)是由OMG组织制订的一种标准的面向对象应用程序体系规 ...
- 用Python构建你自己的推荐系统
用Python构建你自己的推荐系统 现如今,网站用推荐系统为你提供个性化的体验,告诉你买啥,吃啥甚至你应该和谁交朋友.尽管每个人口味不同,但大体都适用这个套路.人们倾向于喜欢那些与自己喜欢的其他东西相 ...
- js 获取Array数组 最大值 最小值
https://stackoverflow.com/questions/1669190/find-the-min-max-element-of-an-array-in-javascript // 错误 ...
- Spring-ApplicationContext容器
Spring ApplicationContext容器 ApplicationContext是spring中比较高级的容器.和BeanFactory类似,它可以加载配置文件中定义的bean,并将所有b ...