JSONP解决前端跨域问题

最新推荐文章于 2025-10-14 16:03:11 发布

原创

最新推荐文章于 2025-10-14 16:03:11 发布 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #前端 #跨域

本文详细介绍了浏览器的同源策略，这是一种为了保障用户信息安全而设定的机制，限制了不同源之间的交互。同源策略阻止了Cookie、DOM和AJAX等的跨域访问。然而，这也带来了灵活性的问题，为此JSONP作为一种跨域解决方案应运而生。JSONP利用script标签不受同源策略限制的特性，通过回调函数实现数据的传递，但仅支持GET请求。文中通过示例展示了如何在客户端和服务端实现JSONP。

一：跨域问题

广义的跨域：指一个域下的文档或脚本试图去请求另一个域下的资源。

1.) 资源跳转： a链接、重定向、表单提交
2.) 资源嵌入： <link>、<script>、<img>、
     <frame>等dom标签，
    还有样式中background:url()、
    @font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

但我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

浏览器同源策略：同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

设置同源策略的目的：同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

同源策略的限制：

Cookie、LocalStorage 和 IndexDB 无法读写
DOM 和 Js对象无法获得
AJAX请求不能发送

对于第三条的AJAX请求无法发送，其实本质是，一方面浏览器发现一个源的js向其他源的接口发送请求时会自动带上Origin头标识来自的源，让服务器能通过Origin判断要不要向应；另一方面，浏览器在接收到响应后如果没有发现Access-Control-Allow-Origin允许发送请求的域进行请求那也不允许解析。

同源策略带来的不便：安全性和方便性是成反比的，同源策略提升了Web前端的安全性，但牺牲了Web拓展上的灵活性。设想若把html、js、css、flash，image等文件全部布置在一台服务器上，小网站这样凑活还行，大中网站如果这样做服务器根本受不了的，可用性都不能保证的话。所以，现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。例如img script style等标签，都允许垮域引用资源，严格说这都是不符合同源要求的。然而，只能是引用这些资源，不能读取这些资源的内容。

二：JSONP跨域解决方案

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

jsonp的原理就是利用 script 不受同源策略的限制进行跨域，但也因此只能使用 get 方式，易受到 XSS攻击

在这里插入图片描述
这里我们使用菜鸟教程提供的接口：

https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction

假设客户期望返回数据：[“customername1”,“customername2”]。但真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])，但浏览器自身机制会使其执行callbackFunction函数，并且带有参数[“customername1”,“customername2”]。

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8

最低0.47元/天解锁文章