如何在form-data格式的POST请求中传入client_id与client_secret

首先明确：OAuth2的client_credentials授权模式，传递client_id和client_secret有两种标准方式，你的代码问题出在请求头与参数传递方式冲突，以及Content-Type设置错误，以下是两种正确实现方式：

方式一：通过Basic Auth请求头传递（推荐，符合OAuth2规范） #

这种方式不需要在form-data里加client_id和client_secret，而是将这两个值用冒号拼接后做Base64编码，放到Authorization: Basic xxx头中，同时确保Content-Type与请求体格式匹配：

正确代码示例 #

// 把你的client_id和client_secret用冒号拼接后做Base64编码
const credentials = btoa('你的client_id:你的client_secret');

const postRequest = {
  url: 'https://address',
  method: 'POST',
  headers: {
    'Authorization': `Basic ${credentials}`,
    // 若使用的请求库支持自动处理formData，可省略手动设置Content-Type
    // 'Content-Type': 'multipart/form-data'
  },
  formData: {
    'grant_type': 'client_credentials'
  }
};

方式二：通过form-data参数传递 #

如果API支持直接在form-data里传client_id和client_secret，需要去掉Authorization头，同时确保参数完整：

正确代码示例 #

const postRequest = {
  url: 'https://address',
  method: 'POST',
  headers: {
    // 多数请求库会自动生成正确的multipart/form-data头，无需手动设置
    // 'Content-Type': 'multipart/form-data'
  },
  formData: {
    'grant_type': 'client_credentials',
    'client_id': '你的实际client_id',
    'client_secret': '你的实际client_secret'
  }
};

你之前代码失效的原因 #

1. Content-Type设置错误：你手动指定了application/x-www-form-urlencoded，但使用了formData字段，两者格式不匹配，导致后端无法解析参数；
2. 参数传递方式冲突：同时设置了Authorization: Basic头和form-data里的client_id/client_secret，后端可能优先识别头信息，忽略form中的参数，或因格式冲突直接报错。

参考内容（原Stack Overflow内容翻译） #

如何使用FormData进行AJAX文件上传？ #

FormData对象用于组装键值对数据，可通过XMLHttpRequest或Fetch API发送，适用于上传文件或提交表单数据：

1. 创建FormData对象：既可以从HTML表单直接初始化，也能手动添加字段：

   // 手动创建FormData
   const formData = new FormData();
   // 添加普通文本字段
   formData.append('username', 'test_user');
   // 添加文件字段
   formData.append('avatar', fileInputElement.files[0]);
   

2. 发送请求：使用Fetch或XMLHttpRequest发送时，不需要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头及边界标识：

   fetch('https://example.com/upload', {
     method: 'POST',
     body: formData
   });
   

3. 注意事项：如果手动设置Content-Type，必须包含浏览器自动生成的边界标识，否则后端无法正确解析表单数据，因此推荐让浏览器自动处理请求头。

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