无法从外部 URL 获取标题并在 HTML 页面中显示答案

【问题标题】：Cannot get tittle from external URL and show it in HTML page无法从外部 URL 获取标题并在 HTML 页面中显示
【发布时间】：2020-05-02 01:04:27
【问题描述】：

我正在尝试编写一个 html 文件，其中有一个 URL 链接，类似的名称是链接本身的标题。

为此，我遵循以下帖子的第二个答案中提出的答案：How can I get the title of a webpage given the url (an external url) using JQuery/JS

<!DOCTYPE html>
<html>
    <head>
        <script>
        function getTitle(externalUrl){
          var proxyurl = "./get_external_content.php?url=" + externalUrl;
          $.ajax({
            url: proxyurl,
            async: true,
            success: function(response) {
              alert(response);
            },   
            error: function(e) {
              alert("error! " + e);
            }
          });
        }
        </script>
    </head>
<body>

<!-- Link to news -->
<a href="https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml">Notizia Corriere</a>.


getTitle("https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml")

PHP 文件是这样的：

<?php
function file_get_contents_curl($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}

$url = $_REQUEST["url"];
$html = file_get_contents_curl($url);

preg_match('/<title>(.+)<\/title>/',$html,$matches);
$title = $matches[1];

echo  json_encode(array("url" => $url, "title" => $title));

我不得不说我不确定我是否正确调用了 .php 函数，对于 getTitle 函数也是如此。对你们中的许多人来说，这可能是一个基本问题，但我没有 html/php 经验，我无法解决这个问题。您能否引导我找到解决此问题的正确方法？

【问题讨论】：

你的 PHP 脚本的内容是什么？加载您的页面，按 F12，转到 Network 选项卡并监控请求；查找任何非 200 代码。
@user8555937 好点！我刚刚添加了它:)

标签： javascript php html url title

【解决方案1】：

代码运行良好，但可以进行改进。确保您已包含 jquery CDN 脚本。确保您在 <script></script> 标签内调用 getTitle。确保 php 脚本的路径有效。如前所述，在浏览器中按 F12 -> 网络选项卡可以帮助您诊断请求/响应问题。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        function getTitle(externalUrl){
          var proxyurl = "./get_external_content.php?url=" + externalUrl;
          $.ajax({
            url: proxyurl,
            async: true,
            success: function(response) {
              alert(response.title);
            },   
            error: function(e) {
              alert("error! " + e);
            }
          });
        }
        getTitle("https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml");
        </script>
    </head>
<body>

为了获得更好的结果，您需要在 PHP 响应中指定 JSON 内容类型：

<?php
function file_get_contents_curl($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}

$url = $_REQUEST["url"];
$html = file_get_contents_curl($url);

preg_match('/<title>(.+)<\/title>/',$html,$matches);
$title = $matches[1];

header('Content-Type: application/json', true);
echo  json_encode(array("url" => $url, "title" => $title));

【讨论】：

不幸的是，当我尝试运行它时，我收到以下错误：jquery-3.4.1.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/A063772/Desktop/Projects/HTML_Page/Scripts/get_external_content.php?url=https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 那么这是什么意思？
您需要在服务器环境中执行操作。安装 XAMP，将文件复制到公用文件夹，然后在浏览器中通过 localhost/file.htm 访问它们。注意设置可能会有所不同。