Apollo REST 数据源和 Imgur API - 使用表单数据不断收到 400 Bad Request答案

【问题标题】：Apollo REST Data Source and Imgur API - Keep getting 400 Bad Request using form dataApollo REST 数据源和 Imgur API - 使用表单数据不断收到 400 Bad Request
【发布时间】：2021-07-15 06:24:42
【问题描述】：

我正在尝试实现 apollo-datasource-rest 以通过 Imgur 的 API 处理通过 URL 上传的图像（此处的文档：https://apidocs.imgur.com/）

我最初收到一个400 错误，它读取We don't support that file type!，并确定这是由于apollo-datasource-rest 自动将Content-Type 设置为application/json。使用form-data npm 包修复该问题后，我的代码如下所示：

class ImgurAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = "https://api.imgur.com/3/";
  }

  willSendRequest(request) {
    request.headers.set("Content-Type", "multipart/form-data");
    request.headers.set(
      "Authorization",
      `Client-ID ${process.env.IMGUR_CLIENT_ID}`
    );
    console.log(request);
  }

  async uploadImageFromUrl(url) {
    const formData = new FormData();
    formData.append("image", url);
    return this.post("upload", formData);
  }
}

我现在不再收到We don't support that file type! 错误，但我仍然收到400 响应，其状态文本仅为Bad Request。前面代码 sn-p 中的 console.log() 打印出这个：

{
  method: 'POST',
  path: 'upload',
  body: FormData {
    _overheadLength: 104,
    _valueLength: 80,
    _valuesToMeasure: [],
    writable: false,
    readable: true,
    dataSize: 0,
    maxDataSize: 2097152,
    pauseStreams: true,
    _released: false,
    _streams: [
      '----------------------------594660553626244976225816\r\n' +
        'Content-Disposition: form-data; name="image"\r\n' +
        '\r\n',
      'https://upload.wikimedia.org/wikipedia/commons/a/a0/Sunflower_as_gif_websafe.gif',
      [Function: bound ]
    ],
    _currentStream: null,
    _insideLoop: false,
    _pendingNext: false,
    _boundary: '--------------------------594660553626244976225816'
  },
  params: URLSearchParams {},
  headers: Headers {
    [Symbol(map)]: [Object: null prototype] {
      'Content-Type': [Array],
      Authorization: [Array]
    }
  }
}

我在这里缺少什么？ API 似乎正在接受我的表单数据，所以我认为其他标题之一可能存在问题，但在 Postman 中，看起来只有几个必需的标题，其中大部分是计算出来的（例如 Content-Length）和所以我假设apollo-datasource-rest 必须处理这个问题。

【问题讨论】：

标签： multipartform-data apollo apollo-server imgur apollo-datasource-rest

【解决方案1】：

在对multipart/form-data进行了更多研究后，我发现boundary参数是强制性的，并且必须添加到请求中的Content-Type值，以便服务器能够解析有效负载。此外，我无法手动将其设置为请求中的参数（至少不是以实际工作的方式）。 Postman 通常在发送请求时计算该字段，但apollo-datasource-rest 不会自动处理。

将 Content-Type 更改为 application/x-www-form-urlencoded 并使用 url 编码的字符串而不是 form-data 解决了这个问题。

这是更新后的代码：

  willSendRequest(request) {
    request.headers.set("Content-Type", `application/x-www-form-urlencoded`);
    request.headers.set(
      "Authorization",
      `Client-ID ${process.env.IMGUR_CLIENT_ID}`
    );
    console.log(request);
  }

  async uploadImageFromUrl(url) {
    const formData = `image=${url}&album=${process.env.IMGUR_ALBUM_DELETE_HASH}&type=url`;
    return this.post("upload", formData);
  }

【讨论】：