angular-realworld-example-app本地API配置后功能异常求助

先看你配置的api_url，首先有个明显的小问题：你写的是'localhost:3306/api'，这里缺少了协议头（http://），Angular会把它当成相对路径去请求——也就是从http://localhost:4200/localhost:3306/api发起请求，这肯定找不到你的API。先把这个改过来：

export const environment = { 
  production: false, 
  api_url: 'http://localhost:3306/api' 
};

接下来按以下步骤逐一排查：

1. 确认本地API服务是否正常可访问 #

打开浏览器直接访问http://localhost:3306/api，或者用Postman这类工具发送GET请求，看看能不能拿到合法的响应。这里要注意：MAMP默认的Web服务端口是8888，MySQL数据库端口才是3306，你是不是把API部署到了MySQL端口？这显然有问题，得确认你的API实际运行的端口是多少，再调整api_url到正确端口。

2. 解决跨域（CORS）问题 #

Angular开发服务器跑在localhost:4200，而API在localhost:3306，属于不同端口，浏览器会触发CORS安全限制，导致请求被拦截。有两种常用解决方法：

方法一：在后端API中配置CORS #

如果你的API是用PHP（MAMP默认支持）写的，在API的入口文件（比如index.php）顶部添加以下代码，允许来自4200端口的跨域请求：

header("Access-Control-Allow-Origin: http://localhost:4200");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

方法二：用Angular代理转发请求 #

在项目根目录创建proxy.conf.json文件，内容如下：

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

然后修改angular.json中的serve配置，添加代理文件路径：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "angular-realworld-example-app:build",
    "proxyConfig": "proxy.conf.json"
  }
}

同时把environment.ts中的api_url改成'/api'，这样Angular会通过代理把请求转发到http://localhost:3306/api，避开CORS限制。改完后重启ng serve。

3. 验证请求状态 #

打开浏览器开发者工具（F12）切换到Network标签，点击登录/注册按钮，观察请求情况：

• 如果请求URL不对，再核对api_url配置；
• 如果请求被标记为CORS错误，回到步骤2重新配置；
• 如果请求返回404/500，说明API本身存在问题，需要排查后端服务的运行状态。

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