Angular 7 GET请求API地址被追加应用URL问题求助

嘿，这个问题我刚入门Angular的时候也踩过一模一样的坑！你的请求地址被拼上http://localhost:4200，核心原因是你定义的rolesUrl是相对路径，Angular会自动把当前应用的主机地址拼在前面。下面给你几个靠谱的解决办法：

1. 直接使用完整的绝对路径 #

检查你rolesUrl的定义，如果只是写了localhost:8080/optq/api/test/roles，这其实是相对路径（缺少http://或https://前缀），浏览器会把它当成当前域名下的路径拼接。

修改成完整的绝对路径即可：

private rolesUrl = 'http://localhost:8080/optq/api/test/roles';

2. 用环境变量管理API地址（更规范的做法） #

直接写死URL在代码里不利于后期切换环境（比如开发/生产环境），推荐用Angular自带的环境变量：

• 打开src/environments/environment.ts（开发环境），添加API基础地址：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/optq/api'
};

• 如果是生产环境，修改environment.prod.ts对应的地址即可。

• 然后在你的组件/service里导入环境变量，拼接接口路径：

import { environment } from '../../environments/environment'; // 根据你的文件路径调整

// ...

private rolesUrl = `${environment.apiBaseUrl}/test/roles`;

getRoles(){ 
  this.http.get(this.rolesUrl) 
  .subscribe((payload: Payload<Role>) => { 
    this.roleList = payload.result.map((response: Role) => { 
      return <Role>{ id: response.id, name: response.name }; 
    }); 
  }); 
}

3. 开发环境用代理解决跨域+路径问题 #

如果你的后端没有配置CORS（跨域资源共享），即使改了URL，浏览器可能还会报跨域错误。这时候可以用Angular的代理配置，既解决跨域，又不用写完整URL：

• 在项目根目录创建proxy.conf.json文件：

{
  "/optq/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

• 修改angular.json里的serve配置，添加代理文件路径：

"projects": {
  "your-project-name": { // 替换成你的项目名称
    "architect": {
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "proxyConfig": "proxy.conf.json" // 新增这一行
        },
        // ...其他配置
      }
    }
  }
}

• 之后重启Angular开发服务，你的rolesUrl就可以写成相对路径：

private rolesUrl = '/optq/api/test/roles';

Angular会自动通过代理把请求转发到http://localhost:8080，不会再拼上4200的地址。

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