Angular 5/Node.js中如何配置Access-Control-Allow-Origin？

首先得给你纠正一个关键误区：你在前端请求里添加Access-Control-Allow-Origin、Access-Control-Allow-Methods这些头完全没用！这些头是服务器在响应请求时需要返回给浏览器的，不是客户端发起请求时要带的——浏览器根本不会认可客户端自己加的这些CORS相关头，这也是你之前两种修复方法都失败的核心原因之一。

另外，错误里提到的HTTP 503状态码也不能忽略，这说明你的目标后端服务http://accounts.......com/accounts本身暂时不可用，建议先通过Postman、curl这类工具直接访问这个接口，确认它能正常返回200系列的成功响应，不然即使解决了CORS问题，也拿不到数据。

接下来给你两个可行的解决方案：

方案一：后端配置CORS（推荐生产环境使用） #

让后端开发人员在接口的响应头中添加CORS相关配置：

• 允许你的前端域名跨域：Access-Control-Allow-Origin: http://localhost:4200（生产环境换成你的正式域名，不要用*，避免安全风险）
• 如果浏览器触发了OPTIONS预请求（复杂请求会触发），后端需要处理OPTIONS请求，返回对应的CORS头

不同后端技术栈的配置方式举例：

• Node.js/Express：使用cors中间件，配置允许的 origin
• Java Spring：在控制器上添加@CrossOrigin(origins = "http://localhost:4200")注解，或者全局配置CORS
• PHP：在接口开头添加header("Access-Control-Allow-Origin: http://localhost:4200");

方案二：使用Angular代理（适合开发环境） #

你之前的代理配置写错了目标地址，正确的配置应该指向你的后端服务，而不是前端自己的地址。步骤如下：

1. 修改proxy.conf.json为：

{
  "/accounts": {
    "target": "http://accounts.......com",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

如果你的后端有多个接口都需要代理，可以把匹配规则改成/*，目标还是你的后端域名。

2. 修改account.service.ts中的请求地址为相对路径：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Account } from '../models/account';

@Injectable()
export class AccountService {
  constructor(
    private http: HttpClient,
    private router: Router
  ) {}

  logIn (credentials: any): Observable<Account> {
    // 这里用相对路径，代理会转发到目标后端
    return this.http.get<Account>('/accounts');
  }
}

把之前的baseUrl和多余的请求头都删掉，不需要再添加那些无效的CORS头。

3. 用代理配置启动Angular项目：

ng serve --proxy-config proxy.conf.json

这样Angular的开发服务器会把前端的/accounts请求转发到http://accounts.......com/accounts，因为是同域请求，浏览器就不会触发CORS检查了。

最后再提醒一下：先确认后端服务能正常访问（解决503错误），再处理CORS问题，不然会混淆排查方向。

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