相信上面的問題大家都遇到過。
上面是在 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})