问浏览器mixed-content怎么解决？

提问于 2024-07-05 13:44:52

回答 0关注 1查看 5

前端有ssl，希望连接到后端的socket服务，后端没有配置ssl，所以浏览器报mixed-content。

测试发现，在自己电脑上命令行“curl -v 118.25.187.49:8005”完全没有问题可以正常返回“Hello World”，不过浏览器访问时异常

这是前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Stream Client</title>
</head>
<body>
  <h1>Stream Client</h1>
  <button onclick="fetchStream()">Fetch Stream</button>
  <pre id="streamOutput">Stream Output will appear here...</pre>

  <script>
    function fetchStream() {
      const streamUrl = 'http://118.25.187.49:8005';  // 替换为实际的服务器地址

      fetch(streamUrl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
          }
          return response.text(); // 读取响应体作为文本
        })
        .then(data => {
          const output = document.getElementById('streamOutput');
          output.textContent = data; // 显示数据
        })
        .catch(error => {
          console.error('Error with the stream:', error);
        });
    }
  </script>
</body>
</html>

这是后端php的代码：

<?php
// 设置服务器的IP地址和端口
$server_address = '0.0.0.0:8005';

// 创建 socket 服务
$server = stream_socket_server("tcp://$server_address", $errno, $errstr, STREAM_SERVER_BIND | STREAM_SERVER_LISTEN);
if (!$server) {
    die("Failed to create server: $errstr");
}

echo "Server running on {$server_address}\n";

// 持续等待客户端请求
while (true) {
    // 检查是否有客户端连接
    $read = [$server];
    $write = null;
    $except = null;
    if (stream_select($read, $write, $except, 0)) {
        foreach ($read as $stream) {
            if ($stream === $server) {
                // 接受新的客户端连接
                if ($client = stream_socket_accept($server)) {
                    echo "New client connected\n";
                    // 准备 HTTP 响应
                    $response = createHttpResponse();
                    // 发送 HTTP 响应
                    fwrite($client, $response);
                    echo "HTTP response sent\n";

                    // 关闭客户端连接
                    fclose($client);
                    echo "Client disconnected\n";
                }
            } else {
                // 处理客户端数据（这里简化处理，直接关闭连接）
                fclose($stream);
            }
        }
    }
}

// 释放资源
fclose($server);

// 函数：创建 HTTP 响应
function createHttpResponse() {
    // HTTP 响应状态行
    $statusLine = "HTTP/1.1 200 OK\r\n";
    // HTTP 响应头
    $headers = "Content-Type: text/html; charset=UTF-8\r\n";
    $headers .= "Connection: close\r\n";
    $headers .= "Server: MyCustomServer/1.0\r\n";
    $headers .= "Date: " . gmdate('D, d M Y H:i:s') . " GMT\r\n";
    // 空行，分隔头和体
    $divider = "\r\n";
    // HTTP 响应体
    $body = "<!DOCTYPE html><html><head><title>HTTP Response</title></head><body><h1>Hello, World!</h1><p>This is a complete HTTP response from a PHP server.</p></body></html>";

    // 组合完整的 HTTP 响应
    return $statusLine . $headers . $divider . $body;
}
?>

php