使用 Apache 托管 vue 应用程序：防止从 URL 访问源文件答案

【问题标题】：Hosting vue app with Apache: Prevent source file access from URL使用 Apache 托管 vue 应用程序：防止从 URL 访问源文件
【发布时间】：2022-01-12 16:11:58
【问题描述】：

我想在 Apache 服务器上托管一个 vue 应用程序 - 用于学习目的。为此，我希望 Apache 支持 Vue 路由器，并且我希望不能通过 URL 访问源文件。

为了支持路由器，我在httpd.conf 文件中添加了以下几行：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

Vue documentation

所以这是有效的。但现在我想阻止通过 URL 访问我的源文件。所以我尝试了这个答案的方法： https://stackoverflow.com/a/10236791/9838670

RewriteEngine on 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
RewriteRule \.(gif|jpg)$ - [F]

为了测试，我在重写规则中添加了 CSS 文件

RewriteRule \.(gif|jpg|css)$ - [F]

但是我的index.html 也无法访问这些文件。有人知道如何解决这个问题吗？

我对根目录的设置。我也在为重写引擎加载模块。

LoadModule rewrite_module modules/mod_rewrite.so

DocumentRoot "../../dist/"
<Directory "../../dist/">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
    Require all granted

    # THIS DOES NOT WORK
    # Rewrite engine
    # RewriteEngine on 
    # RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost [NC] 
    # RewriteCond %{HTTP_REFERER} !^http://(www\.)?localhost.*$ [NC] 
    # RewriteRule \.(gif|jpg|css)$ - [F]
    # RedirectMatch "^/$" "/home"

    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </IfModule>

</Directory>

【问题讨论】：

vue.js 如果你不想与你的代码分开，那是错误的选择。转到服务器端，或接受您的代码已下载到浏览器。如果浏览器能看到，用户也能看到。
我在这里的总体思路有误吗？甚至有可能源文件不能直接作为 URL 调用（使用 Apache）？还是现在只有 Vue 才有问题？难道不能将css/*之类的路径重定向到错误页面吗？

标签： apache vue.js

【解决方案1】：

假设 Apache 文档根设置为 DocumentRoot "/folder_one/folder_two"

将文件放在 folder_one 将阻止人们浏览您的 apache 服务器并直接请求文件。

将索引文件放在 folder_two 中并包含一些代码，例如 PHP，以告诉 apache 包含您想要从 folder_one 中的任何文件。

在这个庄园中，Apache 仍然可以从 folder_one 提供您想要的任何文件，并且人们将无法直接请求这些文件，因为这些文件位于 Apache 文档根目录上方的目录中。

【讨论】：