跨域問題

同源問題

協議,域名,端口任意一個不一樣的話,都是不一樣源網址.

同源意味着兩個請求地址只在路徑上有不一樣.

基於網絡安全,默認的,ajax不容許不一樣源的訪問

示例:

//當前頁面是sitea.io/sitea-index.php
$(function () {
    $.ajax({
        url:"http://siteb.io/siteb-time.php",
        success:function (res){
            console.log(res);
        }
    });
})
複製代碼

Access to XMLHttpRequest at 'http://siteb.io/siteb-time.php' from origin 'http://sitea.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是一個十分經典的錯誤,之前作客戶端開發的時候也遇到過,可是不明白是什麼問題.

在sitea.io訪問siteb.io下面的數據,被CORS策略阻塞,在request header中須要設置Access-Control-Alllow-Origin.

問題的核心在於獲取不一樣源頁面的數據

1. 經過img標籤能夠當前頁面訪問到不一樣源數據

<!-- 當前頁面爲http://sitea.io/sitea-index.php -->
	<img src="http://siteb.io/img/02.jpeg">
複製代碼

那麼若是把圖片鏈接換成一個php文件呢?

<img src="http://siteb.io/siteb-time.php">

//siteb-time.php 代碼
<?php 
echo time();
 ?>
複製代碼

雖然請求siteb-time.php狀態碼爲200,是ok的,可是瀏覽器默認按照圖片處理,沒法訪問response

2. 經過link標籤能夠獲取跨域請求

//sitea-index.php代碼
<link rel="stylesheet" type="text/css" href="http://siteb.io/css/style.css">
複製代碼

請求http://siteb.io/css/style.css

可是沒辦法使用代碼操做響應

那麼link標籤的href放一個php標籤呢?而且修改rel和type,能這樣作嗎?link標籤能夠作那些事?

強行連接一個php文件,會發生什麼呢?

<link rel="stylesheet" type="text/css" href="http://siteb.io/siteb-time.php">
複製代碼

請求資源能夠成功,可是不能操做響應

3.script標籤能夠引入外部js文件

強行src連接一個php文件

<script type="text/javascript" src="http://siteb.io/siteb-time.php"></script>複製代碼

會發生什麼呢?

照樣能夠獲取到php文件的內容,可是如何操做呢?可不能夠服務端返回js代碼?,那麼客戶端實際執行到一段js代碼

script標籤既能夠引入一個外部腳本,也能夠包含腳本語句.服務端中獲取到數據以後,調用一個服務端定義好的函數,把響應數據做爲參數,不就能夠操做到響應了.

客戶端代碼	
<script type="text/javascript">
		function foo(data){
			console.log(data);
		}
</script>
<script type="text/javascript" src="http://siteb.io/siteb-time.php"></script>
服務端代碼
<?php 
echo "foo(${time()});"
 ?>複製代碼

結果

提示爲:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://siteb.io/siteb-time.php with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

跨域訪問塊CORB阻塞了跨域響應

發現是由於傳遞的參數應該是string類型的

<?php 
$arr = array('name' => '張三','age' => 18, 'weight' => 188.6);

$str = json_encode($arr);
$foo = "function foo(res){console.log(res);alert(res);};foo(${str});";
echo $foo;
 ?>
複製代碼

這實際上就解決了跨域問題