找不到文件“Index.html”重定向到另一个页面答案

【问题标题】：File Not Found "Index.html" Redirect To Another Page找不到文件“Index.html”重定向到另一个页面
【发布时间】：2021-05-12 05:30:06
【问题描述】：

我正在创建一个应用程序，但我一直遇到这个问题。 “注册页面”有一个“登录”链接，旨在将用户重定向到“登录页面/表单”。但是，当我单击“登录”链接时独立运行“index.html”文件的代码时，它说找不到该文件。但是，如果我使用“http://127.0.0.1:5500/index.html”的“VS Code 的实时服务器”，它工作得非常好。下面是 index.html 的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <title>Connect Us</title>
</head>

<body>
    <div class="wrapper">
        <section class="form signup">
            <header>Connect Us</header>
            <form action="#">
                <div class="error-txt">This is an error message!</div>
                <div class="name-details">
                    <div class="field input">
                        <label>First Name</label>
                        <input type="text" placeholder="First Name">
                    </div>
                    <div class="field input">
                        <label>Last Name</label>
                        <input type="text" placeholder="Last Name">
                    </div>
                </div>
                <div class="field input">
                    <label>Email Address</label>
                    <input type="text" placeholder="Enter your email">
                </div>
                <div class="field input">
                    <label>Password</label>
                    <input type="text" placeholder="Enter a password">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="field input">
                    <label>Confirm Password</label>
                    <input type="text" placeholder="Re-enter the password">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="field image">
                    <label>Profile Picture</label>
                    <input type="file">
                </div>
                <div class="field button">
                    <input type="submit" value="Take me to chat">
                </div>
            </form>
            <div class="link">Already connected? <a href="/login.html">Sign In</a></div>
        </section>
    </div>
</body>

</html>

这里是 login.html 的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <title>Connect Us</title>
</head>

<body>
    <div class="wrapper">
        <section class="form login">
            <header>Connect Us</header>
            <form action="#">
                <div class="error-txt">This is an error message!</div>
                <div class="field input">
                    <label>Email Address</label>
                    <input type="text" placeholder="Enter your email">
                </div>
                <div class="field input">
                    <label>Password</label>
                    <input type="text" placeholder="Enter your password">
                    <i class="fas fa-eye"></i>
                </div>
                <div class="field button">
                    <input type="submit" value="Take me to chat">
                </div>
            </form>
            <div class="link">New Member? <a href="#">Sign Up</a></div>
        </section>
    </div>
</body>

</html>

澄清我的问题是什么：

file:///C:/login.html

您的文件无法访问它可能已被移动、编辑或删除。 ERR_FILE_NOT_FOUND

虽然当我使用“VS Code”运行相同的代码时，它可以完美运行。

注意当我单击“登录”链接时，此 http 会显示：

http://127.0.0.1:5500/login.html

【问题讨论】：

将 <a href="/login.html">Sign In</a> 更改为 <a href="login.html">Sign In</a> 它将起作用。这一切都与您使用文件 URI 的方式有关。它在 VS 代码中运行良好，因为当您从 VS 代码开始时，它会根据您的 url 在端口：5500 上的本地服务器上运行。之前带有/ 的 href 链接是一个绝对 uri，只有当网站托管/运行在服务器上时才会正常。
正如@manish 所说，前导斜杠使其成为绝对 url，这意味着它被解析为根路径。当您查看文件 url 时，根目录是 file:///C:/，这不是您的项目所在的位置。当您使用 Web 服务器时，它可以正常工作，因为服务器配置为从您的项目文件夹中提供服务，因此 / 解析为 index 和 login 所在的文件夹。

标签： javascript html

【解决方案1】：

你有 href = /login.html

当您直接打开文件时，以正斜杠开头的 href 告诉浏览器在文件系统根目录中查找 login.html。见这里http://www.linfo.org/forward_slash.html。 login.html 可能在好几层的文件夹中，所以浏览器找不到它。

如果您通过 HTTP 服务器请求资源，正斜杠会告诉服务器在文档根目录中找到 login.html，您可能会在其中存储您网站的所有文件。

我希望我的解释不会太混乱。有问题请指出。

【讨论】：