如何在Angular中实现与指定curl请求功能一致的HTTP请求

错误原因 #

• 核心问题为请求数据格式不匹配：你使用的curl请求通过--form参数指定用multipart/form-data格式提交参数，但现有Angular代码直接传入JS对象，HttpClient默认会将其序列化为JSON格式，和接口要求的表单格式不一致，因此返回400错误。
• 第二个404错误是因为请求失败后，你读取返回结果中不存在的字段得到undefined，拼接到本地请求路径中导致，第一个问题解决后该报错会同步消失。

修复代码 #

前提配置 #

先确认根模块（一般为AppModule）已导入HttpClientModule：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

业务逻辑改造 #

constructor(private http: HttpClient) {}

ngOnInit() {}

async style(){
  const url = 'http://api.deepai.org/api/fast-style-transfer';
  const headers = new HttpHeaders()
    .set('api-key', 'myKey'); // 替换为你自己的真实api-key

  // 用FormData封装表单参数，对应curl的--form配置
  const formData = new FormData();
  formData.append('content', 'https://www.dmarge.com/cdn-cgi/image/width=1200,quality=85,fit=scale-down,format=auto/https://www.dmarge.com/wp-content/uploads/2021/01/dwayne-the-rock-.jpg');
  formData.append('style', 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/starry-night-print-by-vincent-van-gogh-vincent-van-gogh.jpg');

  try {
    const resp = await this.http.post(url, formData, { headers }).toPromise();
    console.log('请求成功', resp);
    // 后续使用返回字段前先做非空判断，避免出现undefined路径
  } catch (e) {
    console.error('请求失败', e);
  }
}

注意事项 #

• 不要手动给Headers添加Content-Type: multipart/form-data，浏览器会自动生成带boundary的正确请求头，手动添加反而会导致请求格式错误。
• 如果本地开发出现跨域报错，可配置Angular代理转发请求，或让接口侧配置CORS跨域规则。

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