jsonp的实现原理

一般前后端分离的项目都会产生跨域的问题，那么跨域是什么呢？跨域就是协议，域名，端口号中有其中一项不一致就导致跨域。那么我们如何解决跨域问题呢？我这里给大家讲解一下解决跨域的其中一种方式，jsonp的方式。

这里我用到node.js创建的一个服务器 ，模拟后端传数据给前端，代码如下：

var http = require('http'); //发起服务
const url = require('url');
var querystring = require('querystring');
http
	.createServer((req, res) => {
		if (req.url == '/favicon.ico') {
			return;
		}
		let queryObj = null;
		if (req.url == '/index/?call=handleResponse') {
			let urlObj = url.parse(req.url);
			queryObj = querystring.parse(urlObj.query);
		}
		res.statusCode = 200;
		let data = { id: '11111111111', data: [{ a: 1 }] };
		res.end(queryObj.call + '(' + JSON.stringify(data) + ')'); //传递给前端数据
	})
	.listen(8080, '127.0.0.2', () => {
		console.log('Successfully');
		console.log('http://127.0.0.2:8080/');
	});

 代码中使用了http、url和querystring这几个Node.js内置模块。http模块用于创建HTTP服务器，url模块用于解析URL，querystring模块用于解析查询字符串。

然后通过http.createServer()创建HTTP服务器并监听请求

判断请求的URL是否为/favicon.ico，如果是则直接返回。然后判断请求的URL是否为/index/?call=handleResponse，如果是则解析URL中的查询字符串，并将解析结果赋值给queryObj。

res.statusCode = 200;代码将响应的状态码设置为200，并将一个JSON对象转换为字符串后作为响应的内容返回给客户端。其中，queryObj.call是从查询字符串中解析出来的call参数的值，用于构造一个JSONP的响应格式。

前端页面代码是这样写的：

<script>

    function jsonp (fnName) {
      let script = document.createElement("script")
      script.src = "http://127.0.0.2:8080/index/?call=" + fnName;
      document.body.insertBefore(script, document.body.firstChild)
    }
    function handleResponse (response) {
      console.log('请求数据', response)
    }
    jsonp('handleResponse')

</script>

这里定义一个jsonp函数，用于发送JSONP请求：

然后动态创建一个<script>标签，并将请求的URL设置为服务器地址加上call参数的值。然后将该<script>标签插入到页面的最前面，从而触发浏览器发送请求

那么它是怎么样就获取到数据的呢，通过代码res.end(queryObj.call + '(' + JSON.stringify(data) + ')'); 这里通过node.js返回前端的是一个拼接的方法的调用，当它返回的时候，通过调用handleResponse这个方法接收到参数，从而拿到数据。

---

当然还有其他一些跨域的解决方案哦：

跨域资源共享（CORS）

nginx代理跨域

等等...........

欢迎一起讨论哦(●ˇ∀ˇ●) 嘿嘿