使用 axios 和 aws4 向 aws 进行身份验证
我尝试通过 WordPress 编辑器中的 javascript 代码向 AWS 验证身份，以便向 AWS Polly 发送请求。我按照互联网上的几个示例操作，但总是出错。
const CREDS = {
accessKeyId: "xxx",
secretAccessKey: "xxx"
// region: "eu-west-1"
};
axios(
aws4.sign(
{
host: "polly.eu-west-1.amazonaws.com",
method: "GET",
url:
"https://polly.eu-west-1.amazonaws.com/v1/voices?Engine=neural&IncludeAdditionalLanguageCodes=no&LanguageCode=en-US",
data: {},
body: {},
path:
"/v1/voices?Engine=neural&IncludeAdditionalLanguageCodes=no&LanguageCode=en-US"
},
CREDS
)
).then(res => {
console.log(res);
// ...
});
xhr.js:126 Refused to set unsafe header "Host" setRequestHeader @ xhr.js:126 forEach @ utils.js:238 dispatchXhrRequest @ xhr.js:120 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then (async) request @ Axios.js:61 wrap @ bind.js:9 (anonymous) @ edit.js:88 Vh @ react-dom.min.js?ver=16.9.0:163 Uh @ react-dom.min.js?ver=16.9.0:14 Xh @ react-dom.min.js?ver=16.9.0:14 af @ react-dom.min.js?ver=16.9.0:14 Yh @ react-dom.min.js?ver=16.9.0:164 nd @ react-dom.min.js?ver=16.9.0:15 nc @ react-dom.min.js?ver=16.9.0:15 Of @ react-dom.min.js?ver=16.9.0:38 Ac @ react-dom.min.js?ver=16.9.0:39 unstable_runWithPriority @ react.min.js?ver=16.9.0:26 Ma @ react-dom.min.js?ver=16.9.0:52 Be @ react-dom.min.js?ver=16.9.0:119 xi @ react-dom.min.js?ver=16.9.0:39 xhr.js:126 Refused to set unsafe header "Content-Length" setRequestHeader @ xhr.js:126 forEach @ utils.js:238 dispatchXhrRequest @ xhr.js:120 xhrAdapter @ xhr.js:12 dispatchRequest @ dispatchRequest.js:52 Promise.then (async) request @ Axios.js:61 wrap @ bind.js:9 (anonymous) @ edit.js:88 Vh @ react-dom.min.js?ver=16.9.0:163 Uh @ react-dom.min.js?ver=16.9.0:14 Xh @ react-dom.min.js?ver=16.9.0:14 af @ react-dom.min.js?ver=16.9.0:14 Yh @ react-dom.min.js?ver=16.9.0:164 nd @ react-dom.min.js?ver=16.9.0:15 nc @ react-dom.min.js?ver=16.9.0:15 Of @ react-dom.min.js?ver=16.9.0:38 Ac @ react-dom.min.js?ver=16.9.0:39 unstable_runWithPriority @ react.min.js?ver=16.9.0:26 Ma @ react-dom.min.js?ver=16.9.0:52 Be @ react-dom.min.js?ver=16.9.0:119 xi @ react-dom.min.js?ver=16.9.0:39 xhr.js:178 GET https://polly.eu-west-1.amazonaws.com/v1/voices?Engine=neural&IncludeAdditionalLanguageCodes=no&LanguageCode=en-US 403 (Forbidden)
还有这个
aws4.sign(
{
service: "polly",
region: "eu-west-1",
method: "GET",
path:
"/v1/voices?Engine=neural&IncludeAdditionalLanguageCodes=no&LanguageCode=en-US",
headers: {},
body: "{}"
},
CREDS
)
).then(res => {
console.log(res);
// ...
});
isURLSameOrigin.js:57 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined at isURLSameOrigin (isURLSameOrigin.js:57) at dispatchXhrRequest (xhr.js:109) at new Promise () at xhrAdapter (xhr.js:12) at dispatchRequest (dispatchRequest.js:52)
我不明白为什么这么复杂。为什么我做错了？
AWS4 让我头疼了好几天！我找到了一个使用 amplify 的解决方案。它可以创建正确的标头
import {Signer} from '@aws-amplify/core';
let request = {
method: 'GET',
url: 'https://polly.eu-west-1.amazonaws.com/v1/voices?Engine=neural&IncludeAdditionalLanguageCodes=no&LanguageCode=en-US',
data: ''
}
let access_info = {
access_key: xxxxx,
secret_key: xxxxxx,
session_token: xxxxx
}
let service_info = {
service: 'polly',
region: 'eu-west-1'
}
//use amplify sign()function to create the signed headers;
let signedRequest = Signer.sign(request,access_info,service_info)
//remove host from header
delete signedRequest.headers['host']
//I normally create an instance if I need to intercept my response or request
var instance = axios.create();
let response = await instance(signedRequest).then(function (response) {
console.log(response);
return response
}).catch(function (error) {
//... handle errors
});
希望这能帮到你