基于React调用Zendesk API创建工单时返回401错误如何解决

核心错误原因及修复方案 #

• 认证头格式不符合Zendesk要求
  Zendesk API密钥认证的规则为：需将{邮箱地址}/token:{API密钥}拼接为字符串，再进行Base64编码，最终认证头格式为Basic {编码后字符串}，你当前直接把API密钥填入Authorization字段，完全不符合规范，是401报错的主要原因。
  正确构造代码示例：

const user = 'test@test.com'
const api_token = 'some_api_key'
const authString = `${user}/token:${api_token}`
// 对拼接后的字符串做Base64编码
const encodedAuth = window.btoa(authString)
// 请求头中设置
Authorization: `Basic ${encodedAuth}`

• 错误配置no-cors请求模式
  mode: 'no-cors'会强制浏览器禁止发送Authorization这类自定义请求头，同时无法读取响应的有效数据，必须删除该配置项。
• 前端直接调用存在跨域&安全风险
  Zendesk API默认不允许跨域前端调用，就算修复了上述两个问题，请求也会被浏览器CORS策略拦截。同时API密钥明文写在前端代码中会被任意用户通过开发者工具获取，导致你的Zendesk账号被恶意操作。
  建议将Zendesk API调用逻辑迁移到后端服务，前端先将表单数据提交到你的后端，再由后端携带API密钥发起请求到Zendesk，既规避跨域问题，也不会泄露密钥。

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