Angular 5调用Microsoft Graph OneNote API发送HTML内容POST请求问题

你之前用HttpParams构建请求的思路走偏啦——HttpParams是专门处理application/x-www-form-urlencoded类型的表单数据，而OneNote API要求的是multipart/form-data格式的请求，得用浏览器原生的FormData对象来组装才行，而且Angular会自动帮你处理边界（boundary）的问题，完全不用手动拼接。

下面是完整的实现步骤和代码示例：

核心注意点 #

• 用FormData来构建多部分请求内容
• 不要手动设置Content-Type的boundary，Angular会自动生成正确的边界值
• 确保你的accessToken拥有Notes.Create权限（需要在Azure AD应用中配置）

完整代码示例 #

首先在你的服务或组件中导入必要模块：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

然后编写创建页面的方法：

@Injectable()
export class OneNoteService {
  constructor(private http: HttpClient) {}

  createOneNotePage(pageContent: string, accessToken: string) {
    // 1. 初始化FormData对象
    const formData = new FormData();

    // 2. 构建Presentation部分的内容，要包含正确的头部和HTML内容
    const presentationContent = `Content-Disposition: form-data; name="Presentation"
Content-Type: text/html

${pageContent}`;

    // 3. 将内容以Blob形式添加到FormData，确保格式符合要求
    formData.append(
      'Presentation',
      new Blob([presentationContent], { type: 'text/html' })
    );

    // 4. 设置请求头，只需要带上Authorization即可，Content-Type由Angular自动处理
    const requestHeaders = new HttpHeaders({
      'Authorization': `Bearer ${accessToken}`
    });

    // 5. 发送POST请求到Graph API的OneNote页面端点
    return this.http.post(
      'https://graph.microsoft.com/v1.0/me/onenote/pages',
      formData,
      { headers: requestHeaders }
    );
  }
}

为什么原来的代码行不通？ #

你之前用HttpParams.append()的方式，只会生成URL编码的键值对，完全不符合multipart/form-data的格式要求。OneNote API需要的是一个包含Presentation部分的多部分请求，每个部分有自己的Content-Disposition和Content-Type头部，这些都得靠FormData来正确构建。

调用示例 #

在组件中调用这个服务方法：

// 示例HTML内容
const pageHtml = `
<!DOCTYPE html>
<html>
  <head>
    <title>我的新OneNote页面</title>
  </head>
  <body>
    <h1>来自Angular的问候！</h1>
    <p>这是通过Graph API创建的测试页面。</p>
  </body>
</html>
`;

// 传入你的accessToken和页面内容
this.oneNoteService.createOneNotePage(pageHtml, yourAccessToken)
  .subscribe(
    response => console.log('页面创建成功:', response),
    error => console.error('创建失败:', error)
  );

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