完全理解jsonp跨域

最新推荐文章于 2024-04-25 14:21:48 发布
最新推荐文章于 2024-04-25 14:21:48 发布
阅读量89 收藏
点赞数 2
分类专栏： node 文章标签： node.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maqiu233/article/details/120754321
版权

完全理解jsonp跨域

理解同源和跨域

MDN 解释什么是同源策略
同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。简单来说就是协议 域名 端口号都相同就是同源
在这里插入图片描述

反之,只要有一个不满足,那就是跨域,浏览器的同源策略不允许非同源的URL进行资源的交互.

一个简单的跨域请求

目录结构
在这里插入图片描述
需要的包: npm install express

index.html

<body>
	<button id="btnG">GET</button>
	
<script src="jQuery.js"></script>
<script>
  const btnG = document.getElementById("btnG");

  btnG.onclick = function () {
    $.ajax({
      method:'get',
      url:'http://127.0.0.1/getBook',
      success:(res) => {
        if (res.status >= 200 && res.status < 300) return console.log(false);
        console.log(res.data);
      }
    })
  }
</script>
</body>

router.js

const express = require('express');

const router = express.Router();

router.get("/getBook",function(req,res) {
  res.send({
    status:1,
    msg:'获取成功',
    data:{
      bookName: "西游记",
      author:"吴承恩"
    }
  });
});

module.exports = router;

app.js

const express = require('express');
const router = require('./router/router');

const app = express();

app.use(router);

app.listen(80,()=> {
  console.log("express server run at http://127.0.0.1");
})

启动app.js后,浏览器打开index.html,点击get按钮发送请求
在这里插入图片描述
请求过程:
![在这里插入图片描述](https://img-blog.csdnimg.cn/10adc6403ad54b92a7a0bf6ea6f57495.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbWFxaXUyMzM=,size_20,color_FFFFFF,t_70,g_se,x_16

从协议不同就可以看出跨域了,请求回来的数据被浏览器拦截了.

使用jsonp跨域

jsonp出现的早,兼容低版本IE,缺点是只支持GET请求

理解jsonp跨域的原理

script标签不受浏览器同源策略的影响,可以通过script标签的src属性,请求非同源的js脚本,并通过函数调用的形式
接收跨域接口响应回来的数据

一个简单的jsonp跨域代码：

index.html

<body>	
<script>
//在客户端声明函数fn
function fn(data){
	console.log("拿到了服务端的数据");
	console.log(data);
}
</script>
<!--将函数名通过查询字符串的方式传给服务端,并在服务端调用函数-->
<script src="http://127.0.0.1:80?callback=fn"></script>
</body>

router.js

const express = require('express');

const router = express.Router();

router.get("/",function(req,res) {
  const cb = req.query.callback;
  //用${}包裹表示使用作用域里的cb变量,而不是字符串cb,传递数据为字符串123
  res.send(`${cb}(123)`);
});

module.exports = router;

app.js

const express = require('express');
const router = require('./router/router');

const app = express();

app.use(router);

app.listen(80,()=> {
  console.log("express server run at http://127.0.0.1");
})

测试结果,跨域成功
在这里插入图片描述


修改代码跨域失败的代码如下

index.html

<body>
<script>
  function fn(data){
    console.log("拿到了服务端的数据");
    console.log(data);
  }
</script>
<script src="http://127.0.0.1:80?callback=fn"></script>
</body>

router.js

const express = require('express');

const router = express.Router();

router.get("/getBook",function(req,res) {
  const cb = req.query.callback;
  const data = {
    bookName: "西游记",
    author:"吴承恩"
  };

  //res,send中只能传字符串	因此要将参数转为JSON字符串
  res.send(`${cb}(${JSON.stringify(data)})`);
});

module.exports = router;

app.js

const express = require('express');
const router = require('./router/router');

const app = express();

app.use(router);

app.listen(80,()=> {
  console.log("express server run at http://127.0.0.1");
})

测试结果：
在这里插入图片描述

问题到此解决

maqiu233
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsonp跨域请求实现示例
12-09
网上看了很多关于jsonp的...jsonp写法，写法上可以理解成一个javascript函数的执行，例如alert(“hello world”)会弹出hello world的窗口，再例如alert({“name”:”刘德华”})会弹出[object Object]的
JSONP跨域请求原理解析
shao_xuan_的博客
12-15 1161
JSONP跨域请求原理解析什么是同源策略什么是JSONP 什么是同源策略 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。 简单来讲，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 什么是JSONP JSONP是J
关于跨域和JSONP的一些理解
Zheng_lucky的博客
02-15 427
面试的时候，遇到一些比较多问JSONP的，给新手党做一些总结吧，有不对的地方，欢迎大神的指正。 使用背景： 浏览区有同源策略，同源策略是一种约定，是浏览器基本的安全功能，同源就是指协议和域名和端口三者相同。 同源策略会限制cookie，localStorage等存储性能和DOM节点，以及拦截ajax的响应等等 需要在不同协议或者不同域名或者不同端口下进行访问的时候就是跨域。 例如：http://w...
谈谈对Jsonp跨域请求方式的理解
天空飞鸟的博客
08-07 404
               何为跨域？Ajax跨域请求被限制是存在于前端的,是受到浏览器同源策略的限制,当请求与网站的域名,端口号不同的第三方接口时,跨域问题就存在了,访问受到了限制。下面主要谈谈前端跨域请求,后端配合前端的请求做数据返回,也就是通常Jsonp的方式。 假如存在这么一段代码: 那么控制台打印:age:15 name:John jsonhandle({         "...
关于跨域和jsonp的一些理解（新手向）
flower1q84的博客
01-29 319
一、为什么要跨域 跨域，通常情况下是说在两个不通过的域名下面无法进行正常的通信，或者说是无法获取其他域名下面的数据，这个主要的原因是，浏览器出于安全问题的考虑，采用了同源策略，通过浏览器对JS的限制，防止恶意用户获取非法的数据。比如这样的一个场景，恶意用户仿造一个银行的官网，在用户输入框中嵌套了银行的页面，如果是没有同源策略的限制，那么恶意用户则可以通过这样的一种方法来获取银行用户的卡号和登录密
JS —— 跨域问题全解与jsonp 原理理解
永远的北极光
10-10 2779
前端时间一直在做跨域请求相关的工作，被一些问题困住了，最后不得不用jsonp 方式请求数据，直到今天网上看了下jsonp 的实现原理，才意识到之前的跨域问题实质上还是没有解决。所幸的是，看了几篇不错的资源，算是把跨域相关的问题弄清楚了。 下面将先简单介绍jsonp 原理，之后再整理若不用jsonp ，跨域时可能遇到的问题，及解决方法、相关的知识点。 一、jsonp 原理 背景
Jsonp 跨域的原理以及Jquery的解决方案
12-03
这种跨域的通讯方式称为JSONP。 个人理解： 就是在客户端动态注册一个函数function a(data)，然后将函数名传到服务器，服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的function a(data),从而实现了跨域...
浅析JSONP之解决ajax跨域问题
12-08
它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。 　JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)，...
jsonp跨域调用
05-17
个人对jsonp的一点理解，网上的资料太混沌
跨域解决之JSONP和CORS的详细介绍
01-19
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
jsonp跨域原理解析
热门推荐
badmoonc的博客
09-01 7万+
背景： 由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。 同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。 举个简单的例子： http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同） http:/...
跨域简单了解(jsonp)
u014101606的专栏
08-07 294
跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域。 因为存在不同的域，在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。 jsonp ：json+padding，可理解为把JSON填充到一个盒子里。 像这样：callbackFunction(
【Node.js】02 —— Path模块全解析
Allen-
04-21 739
path模块是Node.js内置的一个核心模块，专门用于处理和解析文件/目录路径，提供了跨平台的路径相关操作功能💻 MacOS、Linux、Windows等系统下路径的差异性问题，path模块已经帮我们做了很好的封装和适配。
node.js如何解析get请求和post请求？以及对JSON.stringify与JSON.parse 的具体介绍？
2301_76669854的博客
04-24 439
解析get请求和post请求？JSON.stringify与JSON.parse 的具体介绍？
node.js 解析post请求 方法一
2301_76669854的博客
04-24 1194
一、解析post请求方法一介绍 因为Node.js 没有提供直接解析POST请求提交的数据的模块； 所以一般是通过request的data和end事件获取请求报文中请求正文的内容后再解析。
Node.js -- http模块
2302_79523175的博客
04-25 730
静态资源是指内容长时间不发生改变的资源，例如图片、视频、css文件 、js文件、HTML文件、字体文件等；动态资源是指内容经常更新的资源，例如百度首页、网易首页、京东搜索列表等这些资源都是相对于项目上线之后来说的。
HTML中的文档声明
小卡酷谋的博客
04-22 1179
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
HTML中meta标签属性详解
最新发布
猫老板的豆
04-25 885
meta>标签是一种用于在 HTML 文档头部提供元数据的标签。它通常位于标签内，用于向浏览器和搜索引擎提供关于网页的信息，而不是直接展示给用户是HTML标记head区的一个关键标签，用于描述一个HTML网页文档的属性，提供有关页面的元信息。它并不会显示在页面上，但对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面）、搜索引擎（SEO）或其他web服务。
HTML随机点名程序
m0_65992344的博客
04-22 487
HTML随机点名程序
ajax jsonp跨域请求
09-11
Ajax JSONP（JSON with Padding）是一种允许跨域请求的技术。在同源策略的限制下，浏览器要求请求和响应的域名、协议和端口号必须一致。而通过使用JSONP，可以绕过这种限制。 JSONP利用了<script>标签不受同源策略限制的特点。它通过动态创建<script>标签，将请求发送到目标服务器上的一个特定的URL，该URL返回一个回调函数的调用，将数据作为参数传递给回调函数。 下面是一个使用Ajax JSONP跨域请求的示例： ```javascript function handleResponse(data) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=handleResponse'; document.body.appendChild(script); ``` 在上面的示例中，我们动态创建了一个<script>标签，并设置其src属性为目标服务器上的API地址，同时指定了一个名为`handleResponse`的回调函数。当服务器返回响应时，会调用这个回调函数，并将数据作为参数传递进去。 需要注意的是，在使用JSONP时，服务端需要支持JSONP格式的响应。通常情况下，服务端会根据请求中携带的`callback`参数来动态生成响应内容。 希望这个示例能帮助你理解Ajax JSONP跨域请求的基本原理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值