Angular 16代理配置不生效，跨域CORS问题仍存在求排查

1. 修正代理配置文件 #

Angular 16对代理配置的精准度要求更高，针对GraphQL单一端点，调整proxy-backend.conf.json如下：

{
  "/graphql": {
    "target": "http://localhost:9090",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug",
    "pathRewrite": { "^/graphql": "/graphql" }
  }
}

• changeOrigin: 必须设为true，否则后端可能因Origin不匹配拒绝请求
• logLevel: 设为debug才能在启动和请求时看到代理日志，方便排查
• pathRewrite: 确保请求路径完整转发到后端的/graphql端点

2. 确认启动脚本配置 #

检查package.json中的start-test脚本，确保代理配置路径正确并开启日志：

"scripts": {
  "start-test": "ng serve --proxy-config proxy-backend.conf.json --verbose"
}

• --verbose: 让Angular CLI输出详细启动日志，包括代理初始化信息
• 确保proxy-backend.conf.json与package.json在同一目录，否则需指定完整路径（如src/proxy-backend.conf.json）

3. 修改前端请求地址 #

关键：前端必须请求本地代理路径，而非直接请求后端地址
例如在Apollo Client配置中，将uri改为/graphql：

// app.module.ts 或 apollo.config.ts
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({ uri: '/graphql' }), // 这里改为本地路径
    cache: new InMemoryCache(),
  };
}

@NgModule({
  imports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

如果前端仍直接请求http://localhost:9090/graphql，代理不会介入，自然还是CORS错误。

4. 清除缓存并重启服务 #

• 删除node_modules/.cache文件夹（Angular CLI的缓存目录）
• 执行npm install确保依赖完整
• 重启npm run start-test，观察控制台是否出现代理初始化日志：

  [HPM] Proxy created: /graphql -> http://localhost:9090

• 发起请求后，控制台应显示转发日志：

  [HPM] POST /graphql -> http://localhost:9090

5. 排查其他可能问题 #

• 确认后端localhost:9090正常运行且/graphql端点可访问
• 检查是否有浏览器缓存干扰：打开开发者工具，勾选「禁用缓存」后重试请求
• 若使用了其他代理工具（如Charles、Fiddler），暂时关闭避免冲突

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