引言
在 Angular 应用开发中，SERVER_REQUEST_ORIGIN 是一个相当关键的环境变量。别看它不起眼，管不好它，应用的安全性和通信逻辑就容易出纰漏。这事儿说白了，就是用来告诉代码：到底哪些服务器来源是被信任的。下面我们就把这个变量从里到外剥开看看。
1. Angular 应用和环境变量
Angular 作为前端领域的老牌框架，专门用来搭建现代的单页面应用（SPA）。这类应用有个显著特点：首次加载完成后，后续页面跳转基本不重新加载整个页面，而是通过 AJAX 请求动态拉取内容。这也就意味着，应用跟后端服务器之间需要频繁通信——拿数据、取资源，甚至执行各种操作。
这里就牵出一个老生常谈的问题：怎么确定服务器请求的来源？简单来说，就是你的应用到底该相信哪些域名发来的请求？浏览器默认有个机制叫同源策略——它规定页面只能跟同一个来源（协议、域名、端口三者一致）的资源打交道。这是安全防护的一道基础防线，专门用来防跨站点请求伪造这类攻击。
但在实际场景里，你有很大概率需要跟不同域名的服务器打交道。比如调一个外部的 API 接口，或者跟第三方服务交互。这时候就必须有个办法告诉浏览器：这些域名没问题，可以放行。这个办法，就是通过配置 SERVER_REQUEST_ORIGIN 来实现的。
2. SERVER_REQUEST_ORIGIN 的作用
SERVER_REQUEST_ORIGIN 说白了，就是定义 Angular 应用信任的服务器请求来源清单。它的价值主要体现在下面几个方面。
a. 安全性
当你明确指定了可信的请求来源，就等于给应用上了一道锁。只有来自这些白名单的请求才会被放行，CSRF 这类的攻击自然也就无从下手了。
b. 跨域通信
跨域通信在今天的 Web 应用里几乎是家常便饭。你的前端可能需要从某个完全不同的域名下拿数据或资源。通过配置 SERVER_REQUEST_ORIGIN，可以清楚告诉浏览器哪些域名是“自己人”，从而让跨域请求畅通无阻。
c. 环境配置
既然是环境变量，那就意味着它可以灵活适配不同环境。你完全可以在开发、测试和生产环境下分别设置不同的请求来源。开发时调个测试接口，上线了就切到正式域名——灵活性和安全性两不误。
3. 配置 SERVER_REQUEST_ORIGIN
具体怎么配置呢？Angular 项目里一般有一个 environment 文件夹，里面放着不同环境的配置文件。environment.ts 对应开发环境，environment.prod.ts 对应生产环境等等。下面是大致的配置步骤。
步骤 1：打开环境配置文件
根据当前开发环境，找到对应的environment.ts并打开。
步骤 2：定义 SERVER_REQUEST_ORIGIN
在配置文件中添加这个变量，把你要信任的服务器来源赋给它，通常是服务器的域名或完整 URL。代码大概长这样：
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
步骤 3：在应用中使用 SERVER_REQUEST_ORIGIN
配置好了之后，就可以在服务或组件里引用它来构建请求。最常见的方式是在 HTTP 请求头里设置 Origin 字段，把它的值置为 SERVER_REQUEST_ORIGIN。看个例子：
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../environments/environment';
@Injectable({
providedIn: 'root',
})
export class ApiService {
private readonly serverRequestOrigin: string = environment.SERVER_REQUEST_ORIGIN;
constructor(private https: HttpClient) {}
getData() {
const headers = new HttpHeaders({
'Origin': this.serverRequestOrigin,
// 其他请求头...
});
return this.http.get(`${this.serverRequestOrigin}/api/data`, { headers });
}
}
4. 服务器请求来源的示例
为了更好理解，来看几个典型场景。
示例 1：单一来源
假设你的 Angular 应用只跟一个后端服务器 api.example.com 通信。这个时候直接把 SERVER_REQUEST_ORIGIN 设为这个域名就行：
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
这样一来，浏览器就只允许跟 https://api.example.com 这个域名下的资源通信。
示例 2：多个来源
有的场景下，应用需要跟多个不同域名的服务器交互。例如既要从后端拿数据，又得上身份验证服务器走一圈。这时候可以配置 SERVER_REQUEST_ORIGIN 为一个包含多个域名的字符串，或者根据环境配置不同值：
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.example.com,https://auth.example.com',
// 其他环境配置项...
};
如此配置后，浏览器会同时信任 https://api.example.com 和 https://auth.example.com 两个域名。
示例 3：动态配置
有时候需要根据不同环境动态切换请求来源。比如开发环境用测试域名，生产环境用正式域名。在不同环境的配置文件中设置不同的值即可：
// 在 environment.ts 中
export const environment = {
production: false,
SERVER_REQUEST_ORIGIN: 'https://api.dev.example.com',
// 其他环境配置项...
};
// 在 environment.prod.ts 中
export const environment = {
production: true,
SERVER_REQUEST_ORIGIN: 'https://api.example.com',
// 其他环境配置项...
};
这种灵活性可以让应用在安全性和适配性上做到更好的平衡。
5. 浏览器的同源策略
使用 SERVER_REQUEST_ORIGIN 时，需要先理解浏览器同源策略。这个策略说简单点就是：如果两个资源的协议、域名和端口号不完全一致，浏览器就默认不准跨源请求。而 SERVER_REQUEST_ORIGIN 正是用来列出那些被信任的域名，让浏览器放行的关键配置。
6. 安全性和最佳实践
配置这个变量的时候，有几个核心原则需要遵守。
a. 仅信任必要的域名
千万不要图省事用通配符或者允许所有域名。只信任应用实际需要的那些，安全风险自然就降下来了。
b. 使用 HTTPS
永远用 HTTPS 协议来定义请求来源。数据在传输过程中一旦暴露，后果就不是闹着玩的。
c. 避免在客户端存储敏感信息
客户端环境变量里别放敏感信息，哪怕是在环境配置文件里也不行。敏感数据必须安全地存在服务器端。
总结
在 Angular 应用中，SERVER_REQUEST_ORIGIN 这个环境变量虽然看起来只是一个简单的配置项，但它在管理服务器请求来源、提升安全性和实现灵活跨域通信方面，作用不可小觑。真正理解并正确使用它，是构建一个安全、灵活且可扩展的 Angular 应用的基本功。
