Angular 8迁移至9后出现CORS问题，配置代理仍未解决

阿华AIGC实验室

2026-5-6

我之前升级Angular到9的时候也碰到过代理突然“失效”导致CORS的问题，结合你的情况，咱们一步步来排查解决：

1. 先确认代理配置的核心参数是否正确

Angular 9对代理的配置逻辑其实和8差别不大，但有个参数很容易被忽略——changeOrigin。你的proxy.conf.json一定要加上这个选项，否则后端可能会因为Origin不匹配拒绝请求。正确的配置示例应该是：

{
  "/api/*": {
    "target": "http://localhost",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

changeOrigin: 这个会让代理服务器转发请求时，把请求头里的Origin改成后端的域名（也就是http://localhost），避免后端的跨域校验拦截
logLevel: 开成debug，启动ng serve后你能在控制台看到代理的日志，比如“Proxy created for /api/ to http://localhost”，有这条日志才说明代理真的加载成功了

2. 检查代理配置是否真的被加载

你说已经在angular.json里配置了proxyConfig，但要确认路径是否正确。比如如果你的proxy.conf.json在src文件夹下，配置应该是：

"architect": {
  "serve": {
    "options": {
      "proxyConfig": "src/proxy.conf.json",
      // 其他配置...
    }
  }
}

如果还是不确定，直接用命令行启动强制指定代理：ng serve --proxy-config src/proxy.conf.json，这样能避免angular.json里的配置出错。

3. 前端请求必须用相对路径，不能硬编码后端URL

这是很多人踩的坑：如果你的请求写的是this.http.get('http://localhost/api/users')，那浏览器会直接请求后端，根本不走代理！必须改成相对路径：this.http.get('/api/users')，这样请求会先发给localhost:4200，再由代理转发到http://localhost/api/users，自然就不会有CORS问题。

4. 彻底移除后端的CORS头配置

当你用Angular代理的时候，浏览器和代理服务器是同域的（都是localhost:4200），浏览器根本不会触发CORS校验，所以后端完全不需要返回Access-Control-Allow-Origin头。你之前加了这个头，反而会导致代理转发回来的响应里有这个头，浏览器看到同域请求却有跨域头，就会报错；后来移除又出现问题，大概率是因为前端请求根本没走代理（比如路径写错了），导致直接请求后端，这时候后端没头就会触发CORS错误。

所以一定要把后端web.config里的<add name="Access-Control-Allow-Origin" value="http://localhost:4200" />彻底删掉，确保后端不会返回这个头。