深刻跨域问题(3) - 利用 JSONP 解决跨域

时间 2019-11-06

标签深刻问题利用 jsonp 解决栏目 JSON 繁體版

原文原文链接

阅读目录

深刻跨域问题(1) - 初识 CORS 跨域资源共享；javascript

深刻跨域问题(2) - 利用 CORS 解决跨域html

深刻跨域问题(3) - 利用 JSONP 解决跨域（本篇）java

深刻跨域问题(4) - 利用代理服务器解决跨域数据库

什么是跨域，在这篇文章内部就再也不讲述了，本文主要着重于实现 JSONP 。json

`script` 标签：

根据同源策略的限制，在 端口，域名，协议 这三者 一个或者多个不一样的状况下 ，就会出现跨域限制。后端

可是，<script> 标签访问时，能够跨越这些同源策略限制，但只能使用 GET 方法：跨域

简单例子：

JSONP 的运用十分普遍，各大网站都有使用：豆瓣，QQ音乐等；下面是 QQ音乐的简单 JSONP 接口：服务器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax测试</title>
</head>
     
<body>
    <script> function jsonCallback(data) { console.log(data); } </script>
    <script src="https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg"></script>
</body>

</html>
复制代码

直接打开此连接：app

你能够看到，上述返回信息是一串字符串，字符串里写入了调用 jsonCallback() 函数，并传递一个JSON 字符串。函数

打开控制台，你就能够看到：

上述实现原理：

利用 script 标签，规避跨域，<script src="url">。
在客户端声明一个函数，function jsonCallback() {}。
在服务端根据客户端传来的信息，查找数据库，而后返回一份字符串。
客户端，利用<script>标签解析为可运行的JavaScript代码，调用 jsonCallback() 函数。

事实上，原理很简单。

基本实现

在这个部分里，咱们将基本实现这个流程。

客户端代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax测试</title>
</head>
     
<body>
    
    <script> function jsonpCallback(data) { console.log(data); } </script>
    
    <!-- 负责解析字符串为 JavaScript 代码 -->
    <script src="http://localhost:3000"></script>
</body>

</html>
复制代码

服务器端代码：

const http = require('http');

var data  = { name: 'BruceLee', password: '123456' };

const server = http.createServer((request, response) => {

    if (request.url === '/') {
        response.writeHead(200, { 
            'Content-Type': 'application/json;charset=utf-8' 
        });
        
        // 返回一段 JavaScript 代码
        response.end( "jsonpCallback(" + JSON.stringify(data) + ")" );
    }

});

server.listen(3000, () => {
    console.log('The server is running at http://localhost:3000');
});
复制代码

在这里，咱们最后直接返回一个 字符串 给客户端，<script> 标签将直接解析 字符串 里面的内容为 JavaScript 代码，即调用 jsonpCallback() 函数！！！

这就是，基本的先后端，使用 JSONP 解决跨域问题的方案。

`JSONP` 与 `CORS` 的对比

JSONP 是很早很成熟的解决方案，可是，只能进行 GET 请求，没法实现上传数据等操做。

反观：CORS 虽然分 预请求 和 非预请求 ，可是，无疑支持的功能是很是强大的！！！

参考与感谢

https://www.cnblogs.com/giggle/p/5496596.html
https://blog.csdn.net/u011897301/article/details/52679486

感谢上述两篇连接的做者，他们让我明白了 JSONP 的实质。