跨域解决方案一：JSONP

最新推荐文章于 2025-03-28 14:26:01 发布

Leon_94

最新推荐文章于 2025-03-28 14:26:01 发布

阅读量6.4k

点赞数

分类专栏： JavaScript 文章标签： ajax jsonp jquery

本文链接：https://blog.youkuaiyun.com/sinat_36422236/article/details/79747419

版权

本文介绍了跨域问题的同源策略，并详细讲解了JSONP的工作原理，包括如何动态创建script标签和利用回调函数处理数据。此外，还展示了jQuery中封装的JSONP方法，如使用$.ajax和$.getJSON进行跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同源策略

巴拉巴拉巴拉….(定义就不讲了，简单来说就是协议、端口、域名要相同)

注意：协议和端口引起的不同，不在前端解决的范围内

这里写图片描述

JSONP

jsonp的原理很简单，就是动态的创造script标签，然后利用script的src 不受同源策略约束来跨域获取数据。

第一步
动态创建

var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);

我们在这里借助了豆瓣api来实现数据的交互

第二步
在页面中，返回的JSON作为参数传入回调函数中，我们通过回调函数来来操作数据。

function handleResponse(response){
   
    // 对response数据进行操作代码
}

<!DOCTYPE html>
<html lang="en">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Leon_94

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决跨域之—— JSONP

老司机的后备箱

10-13

853

它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

跨域访问解决方法-jsonp

01-07

使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。

参与评论您还未登录，请先登录后发表或查看评论

JSON跨域解决方案收集

weixin_30834019的博客

07-10

216

最近面试问的挺多的一个问题，就是JavaScript的跨域问题。在这里，对跨域的一些方法做个总结。由于浏览器的同源策略，不同域名、不同端口、不同协议都会构成跨域；但在实际的业务中，很多场景需要进行跨域传递信息，这样就催生出多种跨域方法。 1. 具备src的标签原理：所有具有 src 属性的HTML标签都是可以跨域的在浏览器中， <script> ...

深入理解 JSONP：跨域的经典解决方案

最新发布

写完这行代码打球去的博客

03-28

1010

JSONP（JSON with Padding）是一种跨域数据请求的解决方案。它的核心思想是利用<script>标签不受同源策略限制的特性，通过动态创建<script>标签来实现跨域请求。JSONP 是一种经典的跨域解决方案，其简单性和兼容性使其在过去的前端开发中占据了重要地位。然而，随着 CORS、反向代理等技术的普及，JSONP 的使用场景逐渐减少。在现代开发中，我们更倾向于选择安全性更高、功能更强大的跨域技术。但了解 JSONP 的原理和实现，仍然是每个前端开发者的必修课。

跨域及jsonp

yc123h的博客

05-07

1040

欢迎访文我的博客YangChen’s Blog昨天参加了网易的前端开发实习生面试，分为两次技术面试和一次HR面试，PS.网易的校招和面试效率还是挺高的。这两次技术面试都问到了跨域及jsonp的问题，所以呢就为此写一下吧，这也是前端开发中绕不过的一个重点。什么是跨域？要解释跨域，就要先说明下什么是域？域的英文名是Domain，百度百科给的定义是: 域(Domain)是Windows网络中独立运行的

19-封装一个jsonp

梦格的博客

09-27

152

function jsonp(options) { // 创建script标签 var script = document.createElement("script"); // 生成随机回调函数名 var fnName = "jsonp" + Math.random().toString().replace(".", "") + new Date().getTime(); // 为全局作用域下添加一个属性属性的名字就是我们随机生成的函数名 // 让属性的值指向调用json

Ajax跨域解决方案详解：JSONP、CORS、代理请求方式

"ajax跨域解决方案详解" 从本文中，我们可以总结出以下知识点：一、什么是ajax跨域？ ajax跨域是指浏览器同源策略中的一部分，即浏览器限制了ajax请求只能在同一个域名下进行调用。这是因为浏览器的同源策略限制...

Ajax跨域全面解决方案：JSONP、CORS与代理请求

JSONP是一种老式的跨域解决方案，它利用`<script>`标签不受同源策略限制的特性。服务器返回一个JavaScript函数调用，包含要传递的数据，客户端通过预先定义好的函数名来接收数据。 ### CORS（跨域资源共享） CORS...

跨域问题解决方案：JSONP与CORS实践教程

同时，通过前后端解决方案的介绍，深入理解了JSONP和CORS这两种常用的跨域解决方法。对于前端开发者而言，了解这些技术非常关键，因为它们可以帮助解决在Web开发过程中遇到的跨域限制问题。通过合理的配置和使用这些...

JavaScript跨域解决方案详解：JSONP、CORS等

同时，需要注意的是，对于不同的跨域解决方法，开发者需要充分了解其原理和实现方式，并且在使用过程中考虑到安全性和性能等因素。最后，本文还附上了一些实际的例子和代码，帮助读者更好地理解和使用跨域解决方法。...

跨域之jsonp

zy的博客

11-09

668

跨域问题：由于同源策略，跨协议、主机号、端口号其中之一便会产生跨域问题，导致请求无法发送。解决方法：主流的前端解决方法为jsonp，其他如iframe或flash（这个好像要淘汰了）未去了解。而且做项目的时候跨域问题好像一般都是后端解决，主要jsonp也就解决get请求跨域，遇见post就无能为力了。 jsonp原理：运用了script标签可以跨域请求的特性，动态创建script标签发起请求，通过回调函数获取返回的参数。代码演示： function ajax(obj){ var de..

跨域：JSONP

若水弹丸之地

02-09

259

一、简介 JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。原理：由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&amp;amp;lt; script&amp;amp;gt; 元素是一个例外。利用 &amp;amp;lt; script&amp;amp;gt;

三大方法解决跨域问题（CORS、JSONP、Nginx代理）

weixin_73077810的博客

05-22

2529

三种方案解决跨域问题，CORS、JSONP、Nginx代理，含代码例子

JSONP跨域

weixin_53153139的博客

03-01

426

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。使用JSONP解决跨域问题，只改前端不改后端报语法错误（如图中第二条错误）的原因：JSONP是使用动态创建的一个script标签，而script标签返回的是

jsonp跨域

qq_35872379的博客

10-12

181

想必听过“跨域”这个词的开发人员都应该知道JSONP，它是一种非正式传输协议，常常用于解决浏览器跨域数据访问的问题。JSONP究竟是啥？网上关于这方面的文章很多，但是很多讲得并不浅显易懂，相信很多人看完还是一头雾水。今天我们就一起来了解一下它的由来。了解之前，我们先来看看下面几个概念：JSON：即JavaScrip对象标记，是一种轻量级的数据交换格式。示例：{name: ‘今日头条’, title...

跨域访问（JSONP）

qq_49002903的博客

11-16

323

跨域访问同源策略（互联网默认原则）同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。随着互联网的发展，“同源政策”越来越严格。所谓“同源”指的是“三个相同”：协议相同、域名相同以及端口相同。域名是什么？域名又称为网域，是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。跨域描述：当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时，资源会发起一个跨域 HTTP请求。出于安全原因

跨域原理及jsonp解决方法

石头视角

05-09

737

浏览器同源策略 URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。 e.g. 对于http://store.company.com/dir/page.html进行同源检测： URL 结果原因 http://store.company.com/dir2/other.html...

jsonp跨域方式

qq_42464346的博客

09-12

152

只能用于get方式