通过axios调用Microsoft Graph API时特殊字符编码异常问题

问题原因 #

• 你在Graph Explorer里请求正常，是因为Graph Explorer会自动对URL中的特殊字符做UTF-8编码后再发起请求，所以不会出现识别问题。而自己写代码直接拼接含ö的特殊字符到URL中，没有做正确的URL编码，导致Graph API端接收到的参数字符识别错误，无法匹配到对应结果。
• 你添加的Content-Type请求头不生效：Content-Type是用来标记请求体的格式，GET请求没有请求体，且你指定的ISO-8859-1字符集不符合微软Graph API的要求，Graph API要求所有请求的字符编码为UTF-8。
• 拼接的URL中多了冗余斜杠v1.0//users，虽然多数场景下服务端会兼容，但也存在小概率引发路由匹配异常的问题。

解决方法 #

方法1：使用axios自带的params配置项（推荐）

axios会自动对params中的参数做UTF-8编码，无需手动处理，代码示例：

const options = {
  headers: {
    Authorization: `Bearer ${accessToken}`
    // GET请求无需设置Content-Type头
  },
  params: {
    $filter: "startswith(displayName,'jö')"
  }
};
axios.get('https://graph.microsoft.com/v1.0/users', options)
.then(res => console.log(res.data))
.catch(err => console.error(err))

方法2：手动对过滤参数做URL编码

如果你需要手动拼接URL，可以用encodeURIComponent对整个过滤参数做UTF-8编码：

const filterParam = encodeURIComponent("startswith(displayName,'jö')");
const requestUrl = `https://graph.microsoft.com/v1.0/users?$filter=${filterParam}`;
axios.get(requestUrl, {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
})

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