解決前端跨域的方法有哪些

1、首先一個域名的組成：

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域

JavaScript出於安全方面的考慮，不允許跨域調用其它頁面的對象。跨域就可以理解爲因爲JavaScript同源策略的限制，a.com下的js無法操作b.com或者c.a.com域名下的對象。

2、處理跨域的方法：
1)處理方法一——在後臺進行處理：通過在同域名下web服務器創建一個代理
例如某個前端頁面想要調用上海的服務器，但它們不是同源的，但是它和北京的服務器是同源的，那就可以通過讓北京服務器作爲一個代理，先讓北京的服務器從上海的服務器獲取資源，再返回給前端就可以了。
2）處理方法二——JSONP
JSONP可以解決主流瀏覽器跨域數據訪問的問題
【注意】JSONP只能處理GET請求的跨域
例如：
在www.aaa.com的頁面中寫了如下代碼：

<script>
	function jsonp(json) {
		alert(json['name']);
	}
</script>  
<script src = "http://www.bbb.com/jsonp.js"></script> 

其中有個script標籤寫的是bbb.com頁面的地址，意思就是bbb.com這個頁面是可以跨域用到aaa.com頁面的js對象的
然後在bbb.com的頁面中就可以使用aaa.com的js對象了，如下：

jsonp('name':'張無忌','age':21)；//張無忌

下面以我做的一個前後端數據交互的案例來做這個的例子：https://blog.csdn.net/Sunday97/article/details/91883933
看了上面這篇文章下面的案例纔會容易理解點。直接在上面的前後端數據交互的這個案例來做改造

前端的代碼修改的話只需要將dataType的值改爲jsonp,再加上一個jsonp屬性，值爲callback(callback名字可以自己取，只需和後臺相對應)（注意dataType不要寫成了datatype）,這樣改了以後，callback就會作爲參數名和其他參數一樣放在地址欄的後面傳遞給後臺，其值會隨機給生成。然後後臺進行獲取。
例如下面的就是在調試臺看到的，可以看到請求的地址中把callback作爲參數提交併給其賦了很長一串值

然後再看後端返回的信息中也會帶上callback的值：

下面是修改後的前端代碼

<script>
		$(document).ready(function() {
			//信息查詢
			$('#search').click(function() {
				$.ajax({
					type:'GET',
					url:'http://127.0.0.1:80/AJax_test/data.php?number='+$('#keyword').val(),
					dataType:'jsonp',//改的部分
					jsonp:'callback',//改的部分
					success:function(data) {
						if(data.success) {
							$('#searchResult').html(data.msg)
						}else {
							$('#searchResult').html("出現錯誤！" + data.msg)
						}
					},
					error:function(jqXHR) {
						alert("發生錯誤：" + jqXHR.statusText + jqXHR.status)
					}
				})
			});
			//信息創建
			$('#save').click(function() {
				$.ajax({
					type:'POST',
					url:'data.php',
					datatype:'json',
					data:{
						name:$('#personName').val(),
						number:$('#personNumber').val(),
						job:$('#personJob').val()
					},
					success:function(data) {
						if(data.success) {
							$('#createResult').html(data.msg)
						}else {
							$('#createResult').html('出現錯誤' + data.msg)
						}
					},
					error:function(jqXHR) {
						alert('發生錯誤' + jqXHR.status)
					}
				})
			})
		})

同時後臺也是需要修改代碼的：
後端是需要獲取到jsonp傳遞過來的callback的，然後再在要返回給前端的信息上進行修改，下面要返回給前端的是$result，所有就需要在值得前面再拼接一個 $_GET[“callback”],再將後面拼接得信息用()括起來。代碼如下，只修改了GET的部分，POST部分用不到。

function search() {
 	//獲取到callback
 	$jsonp = $_GET["callback"];
 	//檢查是否有個人編號的參數
 	//isset檢查變量是否設置；empty判斷值是否爲空
 	//超全局變量$_GET和$_POST用於收集表單數據
 	if(!isset($_GET["number"]) || empty($_GET["number"])) {
 		/*意思是如果收到的number參數沒有給值即客戶端沒有輸入number時就會執行下面的*/
 		echo '{"success":false,"msg":"您未輸入個人編號哦！"}';
 		return;
 	}

 	//函數之外聲明的變量擁有global作用域，只能在函數以外進行訪問
 	//global關鍵詞用於訪問函數內的全局變量
 	global $person;

 	//獲取number參數
 	$number = $_GET["number"];
 	//改爲jsonp後這裏也需要改變，因爲是要返回給前端的
 	$result = $jsonp.'({"success":false,"msg":"找不到這個人哦"})';

 	//遍歷$person多維數組，如果輸入了編號number那就會在數組裏面找到這個人，找不到就輸出上面默認的$result
 	forEach($person as $value) {
 		if($value["number"] == $number) {
 			$result = $jsonp.'({"success":true,"msg":"這個人存在；編號爲'.$value["number"].';姓名爲'.$value["name"].'；工作爲'.$value["job"].'"})';
 			break;
 		}
 	}
 	echo $result;
 }

3）處理方法三——XHR2
HTML5提供的XMLRequest Level2已經實現了跨域以及其它的一些新功能
但是IE10以下的版本都不支持
這個方法就是在服務器端做一些小小的改造：
在後端數據頁面的頭部加上下面的兩行代碼

header("Access-Control-Allow-Origin:*");//後面的*表示所有的域都可以訪問，也可以設置特定的域
header("Access-Control-Allow-Methods:POST,GET")//允許GET和POST請求都可以跨域

例如在我的用php寫的後端的頭部加上這兩行：