I'm trying to issue a CORS get
request in Vue via axios. Everything works well so far, but if I need to authenticate via basic auth, I cannot get it to work.
Heres my code
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)
})
}
Even though I entered the credentials, as well as the url correctly, I always get a 401 response. It looks like this.
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
The raw request looks like that
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
What am I missing? With Postman and the exact same credentials, everything works like a charm. Even in Chrome directly.
I saw that this question was already asked a few times, but all the posed answers on other threads are no solution for me. I cannot issue the request from node, for example.
Edit: I also tried issuing a request with vanilla JS, also to no avail. It seems the problem lies in the backend. Here's my code, nevertheless.
let xml = new XMLHttpRequest();
xml.open('GET', api, true);
xml.setRequestHeader('Authorization', 'Basic: ' + btoa(user + ':' + pass));
xml.send();
I had the same experience and my workaround was using the following set up to deal with communicating with an OAuth server we had set up:
axios({
headers: { "Content-Type": "application/x-www-form-urlencoded" },
method: "post",
url: REVOKE_URL,
auth: {
username: CLIENT_ID,
password: CLIENT_SECRET
},
data: {
datastuff: actualData
}
});
This worked after futile attempts at using axios.post for days.
Axios version: 0.18.0
So I was looking for example of how to do a post for this and couldn't find a good one. Got it working and it looks like:
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}`
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With