Angular14 CORS跨域问题求助：本地调用HTTPS接口遭拦截

一、代理无效的核心问题修复 #

你的代理配置存在错误：Angular代理的target字段只能设置单个URL，不能使用数组，这是导致代理失效的主要原因。需针对开发/生产环境分别配置独立的代理文件：

1. 开发环境代理配置（src/proxy.conf.json） #

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" } // 若后端接口无/api前缀，需重写路径，可按需调整
  }
}

2. 生产环境代理配置（src/proxy-prod.conf.json） #

{
  "/api": {
    "target": "https://myurl.com",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": { "^/api": "" }
  }
}

3. 确保前端请求路径正确 #

前端调用接口必须使用相对路径，不能直接写目标URL：

// 正确写法（触发代理）
this.http.get('/api/users').subscribe(...);

// 错误写法（绕过代理，直接跨域）
this.http.get('https://myurl.com/users').subscribe(...);

二、生产环境CORS终极解决方案 #

Angular开发服务器的代理仅在本地开发时生效，生产部署后需用以下方案解决CORS：

• 后端配置CORS头：在后端服务中添加Access-Control-Allow-Origin响应头，允许前端部署的域名。示例：

  Access-Control-Allow-Origin: https://your-frontend-domain.com
  

  （生产环境不建议用*，存在安全风险）

• 反向代理统一域名：用Nginx等工具将前端页面和后端接口映射到同一域名下。示例Nginx配置：

  server {
    listen 443 ssl;
    server_name your-domain.com;
  
    # 前端页面路由
    location / {
      root /path/to/your/angular/dist;
      try_files $uri $uri/ /index.html;
    }
  
    # 后端接口代理
    location /api {
      proxy_pass https://myurl.com;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
  

三、模拟其他源的方法 #

1. 开发环境模拟自定义域名 #

• 修改angular.json的serve配置，添加host字段：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
      "development": {
        "browserTarget": "myapp:build:development",
        "proxyConfig": "src/proxy.conf.json",
        "host": "dev.your-domain.com"
      }
    }
  }
  

• 修改本地hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts；Linux/macOS：/etc/hosts），添加映射：

  127.0.0.1 dev.your-domain.com
  

  启动项目后访问http://dev.your-domain.com:4200，即可模拟自定义源的请求。

2. 测试跨域场景 #

可通过修改hosts切换域名，或用curl命令直接测试：

curl -H "Origin: https://test-domain.com" https://myurl.com/api/users

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