首先，讓我們了解跨域是什么。跨域發(fā)生在兩個(gè)不同域名的網(wǎng)站之間當(dāng)一個(gè)網(wǎng)站的資源如JS、CSS、Ajax或者圖片等請(qǐng)求訪問(wèn)另一個(gè)網(wǎng)站的資源時(shí)，由于同源策略的限制而被阻止。限制一個(gè)網(wǎng)站只能訪問(wèn)與其自身?yè)碛邢嗤蛎?、協(xié)議和端口的資源是同源策略的一個(gè)關(guān)鍵安全特性。
我們?cè)陧?xiàng)目中使用了一個(gè)第三方庫(kù)來(lái)加載圖片，該庫(kù)采用了具有不同域名的地址來(lái)存儲(chǔ)圖片。因此，在瀏覽器中，圖片跨域時(shí)無(wú)法正常顯示。
為了解決這個(gè)問(wèn)題，我們需要在服務(wù)器端進(jìn)行一些設(shè)置。最常見(jiàn)的解決方法是在服務(wù)器端設(shè)置CORS（跨源資源共享）。CORS使得服務(wù)器可以在響應(yīng)客戶端請(qǐng)求時(shí)，限制只有特定的域名可以訪問(wèn)該資源。
在ThinkPHP框架中，我們可以通過(guò)在index.php文件中添加以下代碼來(lái)實(shí)現(xiàn)CORS：
header('Access-Control-Allow-Origin:*'); //允許所有來(lái)源訪問(wèn)
header('Access-Control-Allow-Method:POST,GET'); //允許訪問(wèn)的方式
登錄后復(fù)制
這段代碼允許所有來(lái)源訪問(wèn)資源，并且允許POST和GET方式的訪問(wèn)。
在這里要注意的是，這段代碼應(yīng)該放在index.php的頂部，這樣所有的請(qǐng)求都能使用該設(shè)置。
除了設(shè)置CORS，我們還可以使用其他方法來(lái)解決跨域問(wèn)題。例如JSONP（JSON with Padding），它是一種解決跨域的可行方法，通過(guò)在頁(yè)面中添加一個(gè)script標(biāo)簽，將需要訪問(wèn)的數(shù)據(jù)包裝成一個(gè)函數(shù)，然后在另一個(gè)網(wǎng)站上接收返回的結(jié)果。
在ThinkPHP框架中，我們可以使用如下代碼來(lái)生成JSONP方法：
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'callback';
$data = array('name' => 'test', 'age' => 18);
echo $callback . '(' . json_encode($data) . ')';
登錄后復(fù)制
我們先查看GET參數(shù)是否有callback參數(shù)，若有，則用該參數(shù)作為函數(shù)名。接著，將需返回的數(shù)據(jù)轉(zhuǎn)換成JSON格式，再將其添加到回調(diào)函數(shù)中。最后，在返回?cái)?shù)據(jù)時(shí)，我們將函數(shù)和數(shù)據(jù)一起返回給瀏覽器。
以上就是thinkphp圖片跨域不顯示問(wèn)題如何解決的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.xfxf.net其它相關(guān)文章！
