如何使用 jsonp 实现跨域, 同源策略究竟是什么?

相信上面的问题大家都遇到过。
上面是在 www.a.com/a.html 中通过 ajax 调用 www.b.com/a.php 时遇到的问题(注意: 两个域名不同)，为什么会这样呢，在回答这个问题之前，我需要先了解什么是同源策略。
同源策略 : 是在 web 应用安全模型中的重要概念。该策略规定, 只有当两个 web 页面同源的时候, 才允许一个页面中的脚本, 取访问另一个页面中的数据。
同源是指 URL 协议，域名和端口三者都相同, 缺一不可。
具体的可以参见下表举例说明:

同源策略可以防止一个页面中的恶意脚本访问其他页面中的 DOM 数据。
jsonp 如何实现跨域呢, 要说明这个问题, 我们先来看一下什么是 jsonp ?
jsonp 是一种 javascript 模式, 其可以通过 标签请求数据, 举例如下:

<script>
        function addScriptTag(src){
	        var script = document.createElement('script');
	        script.setAttribute('type', 'text/javascript');
	        script.src = src;
	        document.body.appendChild(script);
	 }
 
	 window.onload = function(){
	        addScriptTag('https://www.b.com/index.php?callback=foo');
	 }
	 
	 function foo(data){
	       console.log('Your public IP address is: ' + data.ip);
	 }
</script>

上面的代码通过 创建 <script> 标签请求了 https://www.b.com/index.php?callback=foo 获得了数据。
事实上, 如果项目引入了 jquery 的话，可以用更简洁的方法替代上面的原生 js 代码来实现跨域:

<script>
        var url = "https://www.0x400.cn/test.php?callback=foo";
        $.getScript(url)
        function foo(data){
        	console.log('Your public IP address is: ' + data.ip);
    	}
</script>

这是后台配合 jsonp 的伪代码实现:

<?php 
	$json = json_encode(['ip' => 123]);
	$callback = $_GET['callback'];
	exit($callback."($json)");

上面的请求的响应内容, 这段代码会作为 js 代码在本地执行，既调用了 foo 方法并传入了一个对象数据

foo({"ip":123})

参考:
https://en.wikipedia.org/wiki/Same-origin_policy
https://en.wikipedia.org/wiki/JSONP
https://hackoops.com/759.html