Axios：无法使用基本身份验证调用API

Question

我正在通过axios在Vue中发出CORS get请求。到目前为止一切都运行良好，但如果我需要通过基本身份验证进行身份验证，则无法使其工作。

这是我的代码

getData: function() {
  let vm = this; // assign vue instance to vm

  axios.get('url', {
    withCredentials: true,
    auth: {
      username: 'name',
      password: 'pass'
    }
  }).then(function(response) {
    console.log(response)
  }).catch(function(error) {
    console.log(error)
  }) 
}

尽管我已经正确输入了凭据和网址，但我总是收到401响应。它看起来像这样。

HTTP/1.1 401 Authorization Required
Date: Wed, 01 Feb 2017 16:23:31 GMT
WWW-Authenticate: Basic realm="'Realm'"
Content-Length: 499
Keep-Alive: timeout=15
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1

原始请求看起来像这样

OPTIONS 'url' HTTP/1.1
Host: 'host'
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: GET
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76
Safari/537.36
Access-Control-Request-Headers: authorization
Accept: */*
DNT: 1
Referer: http://localhost:9000/pages/blog_cc/blog_cc.html
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: de,en;q=0.8

我错过了什么？使用Postman和完全相同的凭据，一切都像魅力一样工作。甚至直接在Chrome中也是如此。

我看到这个问题已经被问了几次，但是其他主题上提出的所有答案对我来说都不是解决方案。例如，我无法从节点发出请求。

编辑：我也尝试使用原始JS发出请求，但效果也不佳。似乎问题在后端。然而，这是我的代码。

let xml = new XMLHttpRequest();
xml.open('GET', api, true);
xml.setRequestHeader('Authorization', 'Basic: ' + btoa(user + ':' + pass));
xml.send();

- user7026341

---

只有这个对我有效：https://dev59.com/yij_s4cB2Jgan1znWFmS#53939140 也许对你有帮助 :D - Karen Garcia

Answer 1

我曾有过同样的经历，我的解决方法是使用以下设置来处理与我们设置的OAuth服务器通信：

axios({
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
  method: "post",
  url: REVOKE_URL,
  auth: {
    username: CLIENT_ID,
    password: CLIENT_SECRET
  },
  data: {
    datastuff: actualData
  }
});

在尝试了数天的axios.post后，这个方法终于起作用了。

Axios版本：0.18.0

- Jeff L

Answer 2

我在寻找有关如何发布文章的示例，但没有找到好的。终于把它弄好了，现在看起来是这样的：

const { MAILCHIMP_KEY } = process.env;

const url = "https://us{yourRegionNumber}.api.mailchimp.com/3.0/lists/{yourlistid}/members/";

const client = axios.create({
  auth: {
    username: "yourmailchimpusername",  //This could be your email
    password: MAILCHIMP_KEY
  },
  headers: {
    "Content-Type": "application/json"
  }
});

const mailChimpRes = await client.post(url, {
  email_address: `${email}`,
  status: "subscribed",
  merge_fields: {
    FNAME: `${firstName}`,
    LNAME: `${lastName}`
  }
});

- Katpas

Answer 3

你可以尝试在 Axios 请求中添加 withCredentials: true 选项，如果这是一个跨站请求。

- theleebriggs

---

这实际上是一个CORS请求，谢谢，我完全忘记提到了！但即使使用 withCredentials: true，错误仍然存在。 - user7026341

OPTIONS请求失败还是后续的GET请求失败？ - theleebriggs

我不太清楚，因为这是我第一次与REST密切合作。但是在我的控制台中，首先我看到 OPTIONS 'url' 401 (Authorization Required) 然后是 XMLHttpRequest cannot load 'url'. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 401.。但第二个消息很奇怪，因为Access-Control-Allow-Origin应该设置为“*”。我该如何进一步调查这个问题？ - user7026341

是的，在我的经验中，后端返回的消息可能隐藏了各种东西，您还需要允许后端接收“Authorization”标头。这可能会引发不允许使用身份验证标头的通配符，因此您可能需要硬编码允许的URL，或者动态使用引用程序。 - theleebriggs

非常感谢！我会与我的团队后端分享这个！但是，Postman和Chrome中的请求是如何进行的呢？ - user7026341

因为Postman不会发出OPTIONS请求，所以它在没有CORS的情况下运行。因此，它只会发送GET请求。 - theleebriggs

Answer 4

根据他们的文档，Mailchimp不支持客户端请求，因此您必须通过服务器端路由:/

- Alex Ting