调用Microsoft Translator接口返回401000未授权错误如何解决

1. 配置了jsonp参数：POST请求不需要jsonp配置，该参数会将你的POST请求自动转为GET请求，同时篡改请求头结构，导致认证头无法正确传递到接口。
2. 请求体格式不符合接口要求：你设置了请求Content-Type为application/json，但实际传递的data是普通JS对象，jQuery会将其转为表单格式，且微软翻译v3接口要求请求体为包含Text字段的对象数组，你当前的参数结构完全不符合要求。
3. 跨域预检请求拦截：前端直接调用第三方接口时，浏览器会先发送不带自定义头的OPTIONS预检请求，微软翻译接口不会处理这类请求，会直接返回401错误。
4. 密钥/区域不匹配：如果复制密钥时带了多余的空格、换行，或者你创建的翻译资源部署区域和代码里填写的westeurope不一致，也会触发认证错误。

• 第一步：删除代码中的jsonp: "oncomplete"配置项，关闭jsonp逻辑。
• 第二步：调整接口地址和请求体格式，修改后的参考代码如下：

// 把from、to参数放到URL中
var apiurl = 'https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=de';
var my_token = 'xxxxxx'; // 注意复制密钥时不要带多余空白
jQuery.ajax({
    url: apiurl,
    dataType: "json",
    crossDomain: true,
    context: this,
    // 转成符合接口要求的JSON字符串
    data: JSON.stringify([{ Text: 'Test simple text' }]),
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Ocp-Apim-Subscription-Key', my_token);
        xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
        xhr.setRequestHeader('X-ClientTraceId', uuid());
        xhr.setRequestHeader('Ocp-Apim-Subscription-Region', 'westeurope');
    },
    contentType: "application/json; charset=UTF-8",
    type: 'POST',
    success: function (msg) {
        console.log(msg);
    },
    error: function (e) {
        console.log(e);
    }
});

• 第三步：验证密钥和区域：确认你使用的密钥是对应翻译资源的有效密钥，且资源部署区域和代码中填写的区域完全一致。
• 第四步：避免前端直接调用：不要在前端代码里明文存放接口密钥，密钥泄露会导致你的资源被恶意调用产生超额费用。建议新增后端中转接口，前端请求你的后端服务，由后端携带密钥调用微软翻译接口再返回结果，同时也能解决跨域问题。

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