thinkphp图片跨域不显示问题怎么解决
1. 问题描述
在使用Thinkphp框架开发Web应用时,有时候会发现部分图片跨域而无法显示的问题,特别是在使用AJAX获取数据、使用Vue等前端框架时更为突出。
2. 问题原因
图片跨域而无法显示的原因是浏览器的同源策略(Same-Origin Policy),即规定了不同源之间的客户端脚本在没有明确授权的情况下,不能读写对方的资源。由于页面和资源的域名、协议、端口号三者之中只要有一个不同,便是不同的源。而图片由于安全策略的限制,只能访问其所在域名下的图片资源,如果需要访问其他域名下的图片资源,需要通过跨域访问来实现。
3. 解决方案
3.1 使用代理服务器
既然同源策略被禁止了,我们可以通过代理服务器来绕过同源策略的限制。我们可以在自己的服务器上搭建一个代理服务器,把图片资源从目标网站上获取到自己的服务器上,然后再把图片资源发送给前端页面,这样就实现了跨域访问图片资源。
但是,使用代理服务器需要考虑代理服务器的性能问题,而且还需要考虑图片资源的更新问题,需要做到及时更新。
3.2 使用php自带函数
在Thinkphp框架中,我们可以使用file_get_contents函数来获取跨域图片资源,然后使用header函数输出相关头信息和图片二进制流即可,如下所示:
function getPic($url){
$header[] = 'Accept-Language: zh-cn';
$header[] = 'Content-Type: application/x-www-form-urlencoded; charset=UTF-8';
$header[] = 'User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, 0);
$data = curl_exec($ch);
curl_close($ch);
header("Content-Type:image/jpg");
echo $data;
}
在前端页面调用该方法即可获取跨域图片资源。
3.3 使用Nginx反向代理
Nginx本身就自带反向代理功能,我们可以将请求转发到源站进行访问。在Nginx配置文件中加入以下语句即可:
location /image/ {
proxy_pass http://www.example.com/image/;
}
在前端页面引用的图片路径就应该是Nginx的访问路径。
4. 总结
跨域图片无法显示是由于浏览器的同源策略所限制,但是我们可以通过代理服务器、php自带函数和Nginx反向代理来解决该问题。每种方法各有优缺点,需要根据特定应用场景来选择合适的方式来实现跨域访问图片资源。