跨域以及通过jsonp解决跨域的方法

什么是同源策略？

    浏览器同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

    同源指的是IP地址、端口号、协议均相同，则为同源，只要其中之一不同即为跨域，不能请求对方资源。

    同源策略是浏览器的一个安全策略，不同源的客户端在没有明确授权的情况下，不能请求对方资源。

 

解决跨域的方案

    解决跨域的方案有许多种，比如在博主的其中一篇文章：（通过nginx）

https://blog.youkuaiyun.com/weixin_40647516/article/details/102660374

    本文主要介绍通过前端解决跨域，使用jsonp技术。

 

原理

    jsonp的原理是，虽然服务端拒绝来自非同源的客户端的XMLHttpRequest（ajax底层）请求，但是允许通过浏览器发起的请求，而script标签中的src属性指向的地址等同于浏览器发起了一次get请求。这是被服务器端允许的。即

<script type="text/javascript" src="https://www.baidu.com/sugrec?wd=java&prod=pc&cb=jQuery34102927041517074078_1582825654144">

等同于直接在浏览器窗口访问https://www.baidu.com/sugrec?wd=java&prod=pc....

    通过浏览器工具查看服务器端响应的数据再做对应的处理即可。服务器端一般返回的是一段js代码，通常情况下是函数调用。如：

    return HttpResponse('jQuery34102927041517074078_1582825654144("hello")')

    而浏览器端则需要自定义这个函数。如：（注意：函数名必须相同）

window['jQuery34102927041517074078_1582825654144'] = function(data){
    console.log(data) // 'hello'
}

 

    通过URL可以发现规律，服务器端通过参数名字获取回调函数名字，以百度为例，百度指定自定义参数名为cb，通过cb获取到函数名，而Jquery底层实际上是根据版本号、随机数和时间戳生成随机的回调函数名。

 

Jquery案例

$.ajax({
    url : 'https://www.baidu.com/sugrec',  // 你需要请求的跨域地址
	dataType: 'jsonp',  // 固定
	jsonp: 'cb',  // 自定义参数名，不填默认为'callback'
	data : {  // 一些必要的数据 
		'wd': q,
		'prod': 'pc'
	},
	success : function(data){ 
        console.log(data)
	}
});

 

总结

    想要利用jsonp获取请求跨域数据，首先分析URL规律，哪些参数代表什么意义，是否必要，观察自定义参数名是什么，即可。但是要知道jsonp的底层是利用script标签发起get请求，感兴趣的可以模仿jQuery，动态往页面插入script标签，自定义回调函数也可。如有疑问，欢迎评论私信指出。