使用 axios 和 aws4 对 aws 进行身份验证答案

【问题标题】：authenticate to aws with axios and aws4使用 axios 和 aws4 对 aws 进行身份验证
【发布时间】：2020-03-05 21:41:27
【问题描述】：

我正在尝试通过 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 拒绝设置不安全的标头“Host” setRequestHeader@xhr.js:126 forEach@utils.js:238 dispatchXhrRequest@xhr.js:120 xhrAdapter@xhr.js:12 dispatchRequest@dispatchRequest.js:52 Promise.then（异步）请求@Axios.js:61 wrap@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: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 不稳定的_runWithPriority @ react.min.js?ver=16.9.0:26 马@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:238 dispatchXhrRequest@xhr.js:120 xhrAdapter@xhr.js:12 dispatchRequest @dispatchRequest.js:52 Promise.then (async) 请求 @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: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 的 @ 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 马@ 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: Cannot read 未定义的属性“协议” 在 isURLSameOrigin (isURLSameOrigin.js:57) 在 dispatchXhrRequest (xhr.js:109) 在新的承诺 () 在 xhrAdapter (xhr.js:12) 在 dispatchRequest (dispatchRequest.js:52)

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

【问题讨论】：

在第一个问题中，您不应该提供主机头。在第二期中，您似乎未能向 Axios 提供 URL。
不，它不起作用。现在我得到相同的错误（xhr.js:126 拒绝设置不安全的标头“主机”，xhr.js:126 拒绝设置不安全的标头“内容长度”）
如果我站在你的立场上，我会完全从图片中删除 aws4、polly，实际上是 AWS。您可以使用 axios 针对 HTTPS URL 针对 dummy.restapiexample.com 等基本端点调用 GET。
@jarmod 基本端点是什么意思？我需要通过 htpp 请求调用 AWS Polly 服务，而我无法使用 aws4 获取它（并且 AWS-SDK 不允许在浏览器中进行身份验证）。你有什么建议>
我给了你一个端点。我可能是错的，但是您最初似乎在正确使用 axios 方面遇到了困难，因此我建议消除 AWS Polly 和签名的复杂性，并确保您可以成功使用 axios。

标签： amazon-web-services axios amazon-polly

【解决方案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

     });

希望对你有帮助

【讨论】：