Nginx中配置禁止直接访问JS文件但仍允许JS文件在网页中正常使用

要在Nginx中配置禁止直接访问JS文件但仍允许JS文件在网页中正常使用，你可以使用以下配置方法。这个配置通过检查请求的 Referer 头，确保JS文件只能从合法的网页引用，而不能被直接访问。

server {
    listen 80;
    server_name your_domain.com; #更改为自己域名

    location / {
        # 其他配置，例如：root, index等
        try_files $uri $uri/ /index.html;
    }

    location ~* \.js$ {
        valid_referers none blocked your_domain.com *.your_domain.com; #更改为自己域名
        if ($invalid_referer) {
            return 403;
        }

        root /path/to/your/js/files;#JS文件的存储路径
        add_header Content-Type application/javascript;
    }

    # 其他配置，例如：error_page, log等
}

配置解释：

1. location / { ... }: 配置根目录的处理方式。
2. location ~ .js$ { ... }: 针对所有 .js 文件的请求进行处理。
3. valid_referers none blocked your_domain.com .your_domain.com:
   • none: 允许没有Referer头的请求（例如，直接在浏览器地址栏输入URL）。
   • blocked: 允许被代理或其他方式隐藏Referer头的请求。
   • your_domain.com 和 *.your_domain.com: 允许从指定域名或子域名发送的请求。
4. if ($invalid_referer) { return 403; }: 如果请求的Referer头不符合前面的规则，则返回403 Forbidden状态。
5. root /path/to/your/js/files: 指定JS文件的存储路径。
6. add_header Content-Type application/javascript: 添加 Content-Type 头，以确保浏览器正确解释JS文件。

这种配置确保了JS文件只能通过你的网站正常引用，而不能被直接访问。请确保将 your_domain.com 替换为你实际使用的域名，并将 /path/to/your/js/files 替换为实际JS文件的路径。