thinkphp图片跨域不显示问题怎么解决

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反向代理来解决该问题。每种方法各有优缺点,需要根据特定应用场景来选择合适的方式来实现跨域访问图片资源。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。

后端开发标签