springboot jsonp解决前端跨域问题总结

现在让我们来讨论与浏览器跨域数据请求相关的问题。可能不是很标准，因为拒绝跨域请求数据并不是浏览器独有的，之所以不能跨域请求数据，是因为浏览器基本上都实现了一个叫做‘同源策略’的安全规范。具体规格是什么？我们在以下地址找到了一份关于MDN的文档：

浏览器同源策略说明

一般来说，当A网站和B网站在协议、端口和域名上存在差异时，浏览器会启动同源策略，拒绝A服务器和B服务器之间的数据请求。

当我们谈论同源策略时，当我们把它写在纸上时，我们总是感到肤浅。我们从来不知道我们应该实践它。同源策略是如何体现的？我将用代码一步一步地演示。

1.甲服务器不能请求乙服务器

既然是跨域，我就假设我有两个域名，即A和localhost。a代表边肖主机在阿里巴巴云上的域名，localhost顾名思义就是边肖的开发机器。让我们想象一个场景，其中一个index.html文件部署在本地主机上，一个简单的spring-boot后台服务部署在A服务器上，并提供一个简单的接口来公开index.html文件调用。最后，浏览器请求本地主机的index.html文件来查看浏览器提示的内容。

index.html

！DOCTYPE htmlhtmlheadtitle跨域访问/title metacarset=' utf-8 '/head body script src=' http:https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'/脚本脚本类型='text/javascript' $(文档)。ready(function() { $)。ajax({ type : 'get '，async : true，URl : ' http://a/hello/map/getuser . JSON '，//请求服务器a上的接口type:' JSON '，success3360函数(数据){//打印返回的数据console.log ('success，且返回数据为' data ')；} });});/script 2 hello world/H2/body/html浏览器请求index.html文件，该文件显示如下：

可以发现请求被浏览器拒绝了，暗示不允许我们跨域请求数据，很难受。怎么解决？

2.使用jsonp解决跨域请求

首先说原理。jsonp主要利用脚本标签的跨域性质，即src属性中的链接地址可以跨域访问，因为我们经常将src属性值设置为cdn的地址，并且已经加载了相关的js库。

index.html

！DOCTYPE htmlhtmlheadtitle跨域访问/title metacarset=' utf-8 '/head body script src=' http:https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'/脚本脚本类型='text/javascript' $(文档)。ready(function() { $)。ajax({ type : 'get '，async : true，jsonp : 'callbackName '，//后端接口参数名JSONP callback : ' callback Function '，//回调函数名URL 3360 ' http://a/hello/map/getuser . JSON '，datatype :' JSONP '，//数据格式为JSONP Success 3360 Function(数据){ console.log(。} });});/script script type=' text/JavaScript ' var回调函数=function (data) {alert('接口返回的数据为：' JSON。stringfy(数据))；};/script/body/HTMl服务器上的接口代码是：

/* * * * *类JsonBackController .* *描述：该控制器返回一串简单的数据数据，json数据由一个简单的用户对象组成* * @作者：黄嘉伟* @自2018年以来：年6月12日* @版本： $ Revision $ $ Date $ $ lastchedby $ * */@ rest controller @请求映射(值='/map ')公共类JsonBackController {私有静态最终Logger=Logger工厂。getlogger(JsonBackController。类)；/** * 解决跨域请求数据* @param响应* @param回调名称前端回调函数名* @返回*/@请求映射(值=' getUser。JSON’)public void getUser(httpersvletresponse响应，@请求参数字符串回调名称){用户用户用户=新用户('黄嘉伟',22);回应。setcontenttype(' text/JavaScript ')；Writer writer=null尝试{ writer=response。getwriter()；作家。write(callbackName '(')；作家。write(用户。tostring())；作家。写(')；');} catch(IOexception e){ logger。错误(' jsonp响应写入失败！数据：' user.toString()，e)；}最后{ if (writer！=null){ try { writer。close()；} catch(IOexception e){ logger。错误(“”输出流关闭异常!'，e)；} writer=null} } }}后端传入一个参数回调名称回调函数名，然后返回一段射流研究…代码给前端，js代码格式如下：

callbackName(数据);

浏览器请求本地主机服务器上的index.html文件，结果如下：

上面这种方式是通过jquery jsonp解决跨域问题的，刚刚不是说可以用脚本标签的科学研究委员会属性吗？四的。

本地主机服务器上的index.html

！DOCTYPE htmlhtmlheadtitle测试跨域访问/title meta charset=' utf-8 '/head body script src=' http :3359 cdn。bootscs。com/jquery/3。3 .1/jquery。量滴js '/script脚本类型=' text/JavaScript ' var callbackFunction=function(数据){ alert('接口返回的数据是：' JSON。stringify(数据))；};/script script type=' text/JavaScript ' src=' http :3358 a/hello/map/getuser。JSON？回调名称=回调函数'/脚本/正文/html浏览器显示效果和上面一致。但此处需要注意的是科学研究委员会表示引入一个射流研究…文件，由于是直接调用接口，而接口返回的数据又刚好是一段射流研究…代码，故能被执行。另外，第二个脚本标签顺序不能颠倒，不然会出现回调函数函数找不到的情况。

工程代码地址：https://github.com/small ercoder/jsondemo

最后总结下，解决跨域的方案有很多种，jsonp只是其中一种，具体情况需要具体分析。希望此文对你有帮助，谢谢阅读，欢迎开源代码库给颗开始，么么哒！也希望大家多多支持我们。