如何为Angular应用配置代理以解决CORS及404错误

问题核心 #

代理未生效导致请求仍指向Angular本地服务（localhost:4200），同时请求参数传递方式错误，引发404及CORS错误。

分步修复 #

1. 调整API地址至代理路径 #

修改environment.ts，将绝对地址改为代理前缀，让请求走Angular代理：

export const environment = {
  production: false,
  API_URL : '/api'
};

2. 修正POST请求参数传递 #

根据后端接收方式调整参数写法：

• 若后端通过URL参数接收：

import { HttpParams } from '@angular/common/http';

postReq(userInput: string): Observable<any> {
  const params = new HttpParams().set('message', userInput);
  return this.http.post(`${environment.API_URL}/chat/`, {}, { params });
}

• 若后端通过请求体接收：

postReq(userInput: string): Observable<any> {
  return this.http.post(`${environment.API_URL}/chat/`, { message: userInput });
}

3. 修正代理配置文件 #

• 文件名拼写错误：将proxyconfirg.json改为proxy.conf.json
• 修正路径重写规则（确保正则匹配正确）：

{
    "/api/*": {
        "target": "http://127.0.0.1:8000/",
        "pathRewrite": {
            "^/api": ""
        },
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    }
}

4. 启动Angular时加载代理配置 #

在package.json的启动脚本中添加代理参数：

"scripts": {
  "start": "ng serve --proxy-config proxy.conf.json",
  // 其他保留脚本
}

执行npm start重新启动服务。

验证要点 #

启动后查看网络请求，地址应为http://localhost:4200/api/chat，代理会自动转发至http://127.0.0.1:8000/chat，CORS错误及404问题应同时解决。

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