如何限制Angular/NGINX服务器中configuration.json的直接URI访问

直接通过NGINX的请求头检查就能实现需求，这是最便捷且无需修改前端代码的方案。核心思路是：Angular应用发起的请求会携带Referer头（指向当前应用页面的URL），而直接在浏览器地址栏输入URL的请求不会携带该头，或头内容与应用域名不符。

具体NGINX配置示例 #

在你的NGINX server配置块中添加以下规则：

# 匹配configuration.json文件的请求
location ~* /assets/configuration/configuration.json {
    # 仅允许来自自身域名的请求
    if ($http_referer !~* ^https?://your-domain\.com/) {
        return 403;
    }
    # 拒绝无Referer的请求（直接输入URL的场景）
    if ($http_referer = "") {
        return 403;
    }
    # 正常返回文件
    try_files $uri =404;
}

把your-domain.com替换成你的Angular应用部署的实际域名，支持HTTP和HTTPS协议。

注意事项 #

• Referer头可以被恶意篡改，但对于阻止普通用户直接复制URL访问的场景已经足够。如果需要更严格的访问控制，可以结合自定义请求头token验证（前端请求时携带特定token，NGINX检查该token的合法性）。
• 部分浏览器在隐私模式下可能不会发送Referer头，这种情况下合法请求也会被拦截，可以根据业务需求调整规则（比如允许特定IP段访问，或补充其他验证条件）。

1. 前端打包嵌入配置 #

将configuration.json的内容直接嵌入Angular应用代码中，避免生成独立的静态文件：

• 在environment.ts中导入配置文件：

  import config from '../assets/configuration/configuration.json';
  export const environment = {
    production: true,
    appConfig: config
  };
  

• 然后在应用中直接使用environment.appConfig即可，无需发起HTTP请求。
• 缺点：修改配置需要重新打包部署，不适合需要动态调整配置的场景。

2. 后端API代理 #

将配置文件移至NGINX的非公开目录（比如/var/secure-config/），通过一个简单的API接口返回配置内容：

• 在NGINX中配置一个内部请求路径，检查请求合法性后返回文件：

  location /api/get-config {
    # 检查Referer或自定义token
    if ($http_referer !~* ^https?://your-domain\.com/) {
        return 403;
    }
    # 内部读取非公开目录的配置文件
    internal;
    root /var/secure-config/;
    rewrite ^/api/get-config$ /configuration.json break;
  }
  

• 前端请求/api/get-config获取配置，而非直接请求静态文件。
• 优势：配置文件不暴露在公开目录，支持动态修改配置（无需重新打包前端），可添加更复杂的验证逻辑。

内容的提问来源于stack exchange，提问作者Jay Patel