跨域解决方案之JSONP实现

本文阅读时长：1分钟不到

前端面试，那可是经常问到同源策略和跨域这问题啊

解决跨域的其中一种方式那必离不开JSONP，想必大伙随口都能答上来

那万一面试要手写JSONP实现时，如何写出让面试官眼前一黑的代码呢？

Webpack的异步加载模块也用到了JSONP哦

何为同源、跨域

同源就是"协议+域名+端口"三者都相同，其他没必要逼逼那么多。

同源策略会有如下限制范围：

Cookie、LocalStorage 和 IndexDB
DOM 无法获得
AJAX发送过去，在数据从后端返回的路上被浏览器拦截了

JSONP原理

`JSONP的实现流程`


  
    声明回调函数，函数名(jsonp)作为API的请求参数，函数形参为要获取的数据
    创建一个<script>标签，src="api接口"，附加上函数名e.g: ?callback=jsonp
    后端判断是jsonp的请求，则把数据和回调函数名进行拼接e.g: "jsonp('Merry Christmas ')"
    后端把拼接后的字符串返回，它将被作为<script>标签的脚本被浏览器执行

参考

MDN 浏览器的同源策略

测试接口：爱思路

阮一峰浏览器同源政策及其规避方法

前端相关

跨域解决方案之JSONP实现

何为同源、跨域

JSONP原理

`JSONP的实现流程`

参考

相关

用springboot项目测试NFS服务碰到前端相关的问题

用springboot项目测试NFS服务碰到前端相关的问题

用springboot项目测试NFS服务碰到前端相关的问题

标签