Angular 15中使用HttpClient发送POST请求至JSON文件报404错误

为什么POST请求会返回404 #

Angular的/assets目录是静态资源目录，开发服务器（ng serve）默认只允许GET请求访问静态文件。当你发送POST请求到这个路径时，服务器会认为你要访问一个后端API接口，而非读取静态文件，因此返回404错误——这和Angular本身的配置无关，是开发服务器的静态资源访问规则导致的。

可行解决方案 #

1. 用内存API模拟POST接口（推荐用于测试） #

如果只是想验证前端POST请求的逻辑，不需要真的写入文件，可以使用Angular官方的angular-in-memory-web-api模拟后端接口：

• 安装依赖：

  npm install angular-in-memory-web-api --save-dev
  

• 创建内存数据服务：

  import { Injectable } from '@angular/core';
  import { InMemoryDbService } from 'angular-in-memory-web-api';
  
  @Injectable({
    providedIn: 'root'
  })
  export class InMemoryDataService implements InMemoryDbService {
    createDb() {
      const results = [];
      return { results };
    }
  }
  

• 在AppModule中配置：

  import { HttpClientModule } from '@angular/common/http';
  import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
  import { InMemoryDataService } from './in-memory-data.service';
  
  @NgModule({
    imports: [
      HttpClientModule,
      HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 100 })
    ]
  })
  export class AppModule { }
  

• 之后即可用POST请求访问/api/results这类路径模拟数据交互，无需再请求静态文件。

2. 后端处理文件写入（生产环境正确做法） #

如果需要真正修改results.json的内容，前端没有权限直接写入本地文件，必须通过后端接口实现：

• 后端提供一个POST接口（比如/api/save-results），接收数据后写入服务器上的results.json文件。
• 前端将POST请求的目标改为这个后端接口地址，而非静态文件路径。

3. 修改开发服务器配置（仅测试用，不推荐） #

如果非要在开发环境让服务器接受POST请求到静态文件路径，可以自定义开发服务器的中间件：

• 在项目根目录创建server.js：

  const express = require('express');
  const app = express();
  const path = require('path');
  
  // 处理POST请求到/assets/results.json
  app.post('/assets/results.json', (req, res) => {
    // 返回模拟数据或读取文件内容返回
    res.json([]);
  });
  
  // 托管Angular静态文件
  app.use(express.static(path.join(__dirname, 'dist/your-project-name')));
  
  app.listen(4200, () => {
    console.log('Server running on http://localhost:4200');
  });
  

• 运行时用node server.js代替ng serve，但这种方式仅能模拟响应，不会真的修改文件，仅适用于临时测试。

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