面试题：Angular跨域在不同环境下的配置差异

开发环境

配置方式：使用 @angular - cli 提供的代理配置。在项目根目录创建 proxy - conf.json 文件，内容示例如下：

{
  "/api": {
    "target": "http://your - backend - server:port",
    "secure": false,
    "changeOrigin": true
  }
}

然后在 package.json 的 scripts 中添加 "start:proxy": "ng serve --proxy - config proxy - conf.json"，通过 npm run start:proxy 启动项目。

注意要点：
- 代理配置中的路径要与实际请求路径匹配，确保代理生效。
- target 要指向正确的后端服务器地址和端口。
- changeOrigin 设置为 true 可以修改请求头中的 Origin 字段，避免一些后端因 Origin 不匹配而拒绝请求。

测试环境

配置方式：
- 服务器端配置：如果测试环境的后端使用的是常见服务器（如Node.js + Express），可以在服务器端设置CORS头信息。例如在Express中：

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('Access - Control - Allow - Origin', '*');
  res.setHeader('Access - Control - Allow - Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access - Control - Allow - Headers', 'Content - Type, Authorization');
  next();
});
// 后续服务器代码

容器配置（若使用容器）：如果后端服务部署在容器（如Docker）中，可以在容器配置中添加相关的环境变量来设置CORS。例如对于一些支持CORS配置的Web服务器镜像，可以在启动容器时设置环境变量。
注意要点：
- 在服务器端配置CORS时，要注意 Access - Control - Allow - Origin 的值，* 虽然方便但存在一定安全风险，生产环境可能需要根据实际情况设置为具体的前端地址。
- 要确保测试环境的服务器和前端部署的网络环境可以相互访问，避免因网络限制导致跨域问题未真正解决。

生产环境

配置方式：
- 服务器端配置：与测试环境类似，在后端服务器进行CORS配置，例如在Java Spring Boot项目中，可以通过配置类设置CORS：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                      .allowedOrigins("http://your - front - end - domain")
                      .allowedMethods("GET", "POST", "PUT", "DELETE")
                      .allowedHeaders("*");
            }
        };
    }
}

CDN或负载均衡器配置：如果项目使用了CDN或负载均衡器（如Nginx），可以在这些组件上配置CORS。以Nginx为例，在配置文件中添加：

location / {
    add_header Access - Control - Allow - Origin http://your - front - end - domain;
    add_header Access - Control - Allow - Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access - Control - Allow - Headers 'DNT,X - User - Token,X - CSRF - Token,Authorization,Accept,Origin,Keep - Alive,User - Agent,X - Requested - With,If - Modified - Since,Cache - Control,Content - Type,Range';
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

注意要点：
- 生产环境中 Access - Control - Allow - Origin 必须设置为真实的前端域名，避免安全漏洞。
- 配置CDN或负载均衡器时，要注意配置的生效范围和优先级，避免影响其他功能或配置。
- 无论采用哪种方式，都要进行充分的安全测试，防止恶意利用跨域漏洞进行攻击。

星途面试题库

面试题：Angular跨域在不同环境下的配置差异

知识考点

面试题答案

开发环境

测试环境

生产环境