跨域请求之JSONP

1. 为什么使用JSONP？

最近一直有一个场景，即浏览器需要直接访问本机上的文件，但是由于安全策略对于这种类型的操作需要用户手动操作，但需求是需要直接访问，因此想法是在本地上搭建一个服务。

因此憨憨如我，使用python搭建了一个本地服务器，搭建方式很简单如下：

python -m http.server -b 0.0.0.0 -d D:/files 80

通过如下方式可以很方便的搭建一个本地服务，在浏览器访问http://localhost即可访问D:/files目录下的所有文件。

正当以为这样可以解决我的需求的时候却出现了一个新的问题，请求出现了跨域…[裂开]。

嗐，本质上可以通过设置服务端支持跨域来解决，奈何对python不了解，试图通过这这种方式进行了解决，但效果不是很理想，解决代码如下:

#!/usr/bin/env python

# Python 3
from http.server import HTTPServer, SimpleHTTPRequestHandler
#import sys
#import socketserver

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

#PORT = 8086
host = ('0.0.0.0', 8086)
Handler = CORSRequestHandler

if __name__ == '__main__':
    server = HTTPServer(host, Handler)
    print("Starting server, listen at: %s:%s" % host)
    server.serve_forever()
#with socketserver.TCPServer(("127.0.0.1", PORT), Handler) as httpd:
#    print("serving at port", PORT)
#    httpd.serve_forever()

通过上述方式，可以支持跨域。后面寻思着通过前端能不能直接支持跨域请求呢，因为本来就对服务端的要求不是很高。后面就找了寻找…。发现了JSONP，一种前端的跨域请求方式。然后…然后就顺道了解了一下。

2. JSONP的原理是什么。

由于同源策略对于资源的访问存在限制，但在前端请求资源的时候有这样几种情况(可能不全面)：

1. 使用a标签请求资源。
2. 使用link标签引入资源。
3. 使用script标签引入资源。

当然还有其他方式，这些方式可以支持跨域请求资源而不受限制。
而对于JSONP所使用的方式就是利用script标签来进行的。
如下代码:

<script src="资源路径(或者一个JS表达式，或者一个可执行的JS语句)">

对于script标签传入的src可以是一个路劲，但返回的数据消息必须是一个可执行的js语句，即alert(“hhh”)、document.getElementById("#ee").value=“hhh”、show(“hhh”)(注，这里对应的show()方法是已经进行了定义的方法)。

这也是JSONP的核心。

通过script标签请求服务端，服务端返回一个可执行的JS语句，但这个需要服务端进行支持，如客户端请求代码:

// 此处省略其他dom结构
<script src='http://127.0.0.1:8080/'></script>

假设服务端返回的数据为==> JSONP， 通过浏览器控制台可以查看到报错信息报语法错误，因为对于JSONP并不是一个可以执行的JS语句,而如果服务端返回的数据为alert(“JSONP”)，进入页面则会弹出包含JSONP字样的alert框。

因为请求完后其会解析为如下内容:

<script src='alert("JSONP")'></script>

对于scr后面的内容是一个可以识别的js语句。同理如果我在请求的时候附带某些参数，服务器接收参数后解析参数进行处理，返回一个可以执行的js语句给src，不就可以实现简单的跨域请求了嘛。

带参请求内容:

<script>
show(msg) {
	alert("JSONP" + msg)
}
</script>
<script src='http://127.0.0.1/?callback=show'></script>

如上代码内容，请求的时候带一个回调函数，服务器得到回调函数名，拼接返回数据。比如服务端返回的数据:

show("经服务器处理的数据，可以是json对象等")

服务端拼接如上信息返回，在客户端的表现形式如下。

<script>
show(msg) {
	alert("JSONP" + msg)
}
</script>
<script src='show("经服务器处理的数据，可以是json对象等")'></script>

由于show方法已经进行过定义，因此该段代码是一个可以执行的JS语句。

JSONP的原理莫过于此，对于JSONP其真正做的事情却不仅如此。

1. 需要帮我动态创建或删除dom结构script标签。
2. 在我们没传递回调的时候帮我们动态生成一个回调函数，以便我们可以减少参数传递。

以上就是对JSONP的原理的简单理解，如有问题请评论纠正哦。后面会介绍其的应用，嘻嘻🤭。