使用 axios 和 aws4 向 aws 进行身份验证

Question

我正在尝试通过 AWS 身份验证，以通过 WordPress 编辑器中的 javascript 代码向 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 拒绝设置不安全标头“Host” setRequestHeader @ xhr.js:126 forEach @ utils.js:238dispatchXhrRequest@xhr.js:120 xhrAdapter@xhr.js:12dispatchRequest@dispatchRequest.js:52 Promise。然后（异步）请求@ Axios.js:61 包装@bind.js:9（匿名）@edit.js:88 Vh @react-dom.min.js?ver=16.9.0:163 呃@react-dom。 min.js?ver=16.9.0:14 Xh@react-dom.min.js?ver=16.9.0:14af@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 @react- dom.min.js?ver=16.9.0:38 Ac@react-dom.min.js?ver=16.9.0:39 stable_runWithPriority@react.min.js?ver=16.9.0:26 Ma @react-dom .min.js?ver=16.9.0:52 为 @react-dom.min.js?ver=16.9.0:119 xi @react-dom.min.js?ver=16.9.0:39 xhr.js: 126 拒绝设置不安全标头“Content-Length” setRequestHeader @ xhr.js:126 forEach @ utils.js:238dispatchXhrRequest@xhr.js:120 xhrAdapter@xhr.js:12dispatchRequest@dispatchRequest.js:52Promise.then(异步）请求@ Axios.js:61 包装@bind.js:9（匿名）@edit.js:88 Vh @react-dom.min.js?ver=16.9.0:163 呃@react-dom.min。 js?ver=16.9.0:14 Xh@react-dom.min.js?ver=16.9.0:14af@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 @react-dom。 min.js?ver=16.9.0:38 Ac@react-dom.min.js?ver=16.9.0:39不稳定_runWithPriority@react.min.js?ver=16.9.0:26 Ma@react-dom.min .js?ver=16.9.0:52 为 @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（禁止）

和这个

      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: 无法在 xhrAdapter (xhr.js: 12) 在dispatchRequest (dispatchRequest.js:52)

我不明白为什么这么复杂。为什么我做错了？

Answer 1

AWS4 让我头疼了好几天！我找到了使用放大的解决方案。它创建正确的标题

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

     });

我希望这可以帮助你