跨域问题-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 ...
随机推荐
- yii2 输出json的方法
public function actionAjax() { if(isset(Yii::$app->request->post('test'))){ $test = "Ajax ...
- 【转】虚拟串口VSPM解决串口编程问题
通过串口调试软件 UartAssist.exe 和虚拟串口软件 VSPM,可以解决串口编程时没用硬件调试的问题,通过VSPM虚拟出串口设备,让程序发送信息到 VSPM 设备后通过 UartAssist ...
- 【DeepLearning】一些资料
记录下,有空研究. http://nlp.stanford.edu/projects/DeepLearningInNaturalLanguageProcessing.shtml http://nlp. ...
- django 模型中的计算字段
models.py class Person(models.Model): family_name= models.CharField(max_length=20, verbose_name='姓') ...
- win7win8 64位汇编开发环境合集安装与设置
win7win8 64位汇编开发环境合集安装与设置 下载 win7 win8 64位汇编开发环境.rar 下载地址(免积分下载) http://download.csdn.net/detail/li ...
- leetcode difficulty and frequency distribution chart
Here is a difficulty and frequency distribution chart for each problem (which I got from the Interne ...
- webpack配置（二）
在配置webpack json loader的时候报错,如下: 解决方案: 首先,json文件中不能有注释 其次: 这里webpack.consig.js里面,modul下的loaders的loade ...
- mysql用sql创建表完整实例
create table user_login_latest( id int(11) unsigned NOT NULL AUTO_INCREMENT, user_id int(11) not nul ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- js数组和字符串去重复几种方法
js数组去重复几种方法 第一种:也是最笨的吧. Array.prototype.unique1 = function () { var r = new Array(); label:for(var i ...