JSONP解决跨域问题

前言

本文主要讲解跨域问题以及解决跨域问题的方案之一JSONP的实现方式。

什么是跨域

全称为Cross-Origin Resource Sharing,简单来说请求的客户端和服务端的端口、域名、协议中的任意一个有不一样的地方在URL的展示中，那么就会出现这个跨域问题。

它产生的原因是因为浏览器实现了一种同源策略，同源策略是为了保护信息安全而设立的安全机制，它限制了一个源从另一个源获取或发送数据资源进行交互操作，为了防止恶意网站窃取用户信息。

JSONP

JSONP它是一种解决跨域的协议，它是利用script标签没有跨域限制的特性，通过在服务器上注册一个函数，同时在本地中调用这个全局函数并且将这个数据作为参数再传递回服务器，就实现了一个跨域的效果。

JSONP解决跨域具体流程

• js创建script标签
• let script=document.createElement('script)
• 全局挂载一个window.jsonp方法
• 把这个标签添加到body标签的尾部
• document.body.append(script)
• 在服务端中先从请求url中解析出参数，然后进行业务处理，然后把返回数据返回。返回时需要设置请求头为text/javaScript
• 服务端返回一段字符串，在前端接收到的是一个可执行的js代码
  比如：
  前端/客户端定义一个函数

handle(data){
console.log(data)
}

前端发送GET请求到服务器：

let script=document.createElement('script')
script.src="http://xxx.com/data?callback=handle"
document.body.appendChild(script)

后端/服务器接收到请求后，把返回数据拼接成字符串：

handle({name:"123"})

注：JSONP只支持GET请求，不支持POST请求。JSONP容易受到XSS攻击。所以一般跨域问题都是通过服务器端解决。