Angular 5 如何读取非assets内部文件夹中的配置文件

这个问题很典型——前端直接访问私有配置文件确实绕不开浏览器的安全限制，因为assets目录是被框架（比如你用HttpClient大概率是Angular）默认配置为可公开访问的静态资源目录，而其他未做静态资源映射的目录，浏览器根本无法直接获取文件内容。核心解决思路是通过后端接口中转，让后端去读取私有目录里的配置文件，再把内容返回给前端。

具体实现步骤： #

1. 后端编写接口读取私有配置文件 #

你需要在后端服务（不管是Node.js、Java Spring、Python Django还是其他技术栈）中创建一个接口，负责读取服务器上非公开目录的配置文件，再将内容返回给前端。

举个Node.js Express的简单示例：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 假设配置文件存放在服务器的private-config目录（非静态资源目录）
app.get('/api/get-app-config', (req, res) => {
  // 可添加权限验证逻辑，比如检查请求头的身份令牌
  const configPath = path.join(__dirname, 'private-config', 'file.json');
  
  fs.readFile(configPath, 'utf8', (err, data) => {
    if (err) {
      res.status(500).json({ error: '读取配置文件失败' });
      return;
    }
    res.json(JSON.parse(data));
  });
});

app.listen(3000, () => console.log('服务运行在3000端口'));

2. 前端调用后端接口获取配置 #

前端依然使用HttpClient，但请求目标改为后端的接口地址，而非直接访问文件路径：

// Angular 示例代码
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  constructor(private http: HttpClient) {}

  getConfig() {
    // 请求后端接口，替代原有的assets文件路径
    return this.http.get('/api/get-app-config');
  }
}

3. 额外安全优化建议 #

• 接口权限验证：给配置接口添加身份校验（比如JWT令牌），避免任意用户都能获取配置内容。
• 敏感信息处理：如果配置包含敏感数据（如API密钥），建议在服务器端加密存储，接口返回时解密；或者直接在后端处理敏感逻辑，只返回前端需要的非敏感内容。
• 跨域配置：如果前后端是跨域部署，需要在后端配置CORS规则，允许前端域名的请求。

为什么不能直接访问非assets目录？ #

框架在打包部署时，只会将assets目录下的文件作为静态资源发布到服务器的静态资源目录（比如dist）；就算你手动将文件放到服务器的其他目录，服务器默认也会禁止浏览器直接访问非静态资源目录的文件——这是服务器的基础安全策略，防止私有文件被公开访问。

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