JSONP解决前端跨域问题

Posted 2021-11-12 eyes++

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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">
    <title>Title</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
    function callbackFunction(result, methodName)
    {
        var html = '<ul>';
        for (var i = 0; i < result.length; i++) {
            html += '<li>' + result[i] + '</li>';
        }
        html += '</ul>';
        document.getElementById('divCustomers').innerHTML = html;
    }
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

服务端(php)代码：

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";

对于jsonp操作，jQuery也提供了封装处理，可以简化和美化代码，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>    
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    
    $('#divCustomers').html(html); 
});
</script>
</body>
</html>

以上是关于JSONP解决前端跨域问题的主要内容，如果未能解决你的问题，请参考以下文章

解决qiankun微前端加载腾讯地图JSONP跨域问题