How to solve the problem that cross-domain images are not displayed in thinkphp

First, let us understand what cross-domain is. Cross-domain occurs between two websites with different domain names. When the resources of one website, such as JS, CSS, Ajax, or images, request to access the resources of another website, they are blocked due to the restrictions of the same-origin policy. Restricting a website to only access resources with the same domain name, protocol, and port as itself is a key security feature of the same-origin policy.

We use a third-party library to load images in the project, which uses addresses with different domain names to store images. Therefore, in the browser, the image cannot be displayed properly when it crosses domain.

In order to solve this problem, we need to make some settings on the server side. The most common solution is to set up CORS (Cross-Origin Resource Sharing) on ​​the server side. CORS allows the server to restrict access to the resource to only specific domain names when responding to client requests.

In the ThinkPHP framework, we can implement CORS by adding the following code to the index.php file:

header('Access-Control-Allow-Origin:*'); //允许所有来源访问
header('Access-Control-Allow-Method:POST,GET'); //允许访问的方式

This code allows all sources to access resources, and allows POST and GET methods access.

It should be noted here that this code should be placed at the top of index.php so that all requests can use this setting.

In addition to setting up CORS, we can also use other methods to solve cross-domain problems. For example, JSONP (JSON with Padding) is a feasible method to solve cross-domain problems. By adding a script tag to the page, the data that needs to be accessed is packaged into a function, and then the returned results are received on another website.

In the ThinkPHP framework, we can use the following code to generate the JSONP method:

$callback = isset($_GET['callback']) ? $_GET['callback'] : 'callback';
$data = array('name' => 'test', 'age' => 18);
echo $callback . '(' . json_encode($data) . ')';

We first check whether the GET parameter has a callback parameter, and if so, use this parameter as the function name. Next, convert the data to be returned into JSON format and add it to the callback function. Finally, when returning data, we return the function to the browser along with the data.

The above is the detailed content of How to solve the problem that cross-domain images are not displayed in thinkphp. For more information, please follow other related articles on the PHP Chinese website!