2017-02-01 3 views
2

Ich versuche, eine CORS get Anfrage in Vue über Axios zu stellen. Bis jetzt funktioniert alles gut, aber wenn ich mich über Basic Auth authentifizieren muss, kann ich es nicht zum Laufen bringen.Axios: Aufruf der API mit Basic Auth nicht möglich

Heres mein 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) 
    }) 
} 

Auch wenn ich die Anmeldeinformationen eingegeben haben, sowie die URL richtig, ich immer eine 401-Antwort erhalten. Es sieht aus wie das.

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 

Die rohe Anfrage sieht aus wie dieser

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 

Was bin ich? Mit Postman und genau den gleichen Referenzen funktioniert alles wie ein Zauber. Sogar in Chrome direkt.

Ich sah, dass diese Frage schon einige Male gestellt wurde, aber alle gestellten Antworten auf andere Threads sind keine Lösung für mich. Ich kann beispielsweise die Anfrage von Knoten nicht ausgeben.

Edit: Ich habe auch versucht, eine Anfrage mit Vanille JS, auch vergebens. Es scheint das Problem liegt im Backend. Hier ist mein Code trotzdem.

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

Antwort

0

könnten Sie versuchen, die withCredentials: true, Option zum Axios Anfrage vorbei, wenn es eine Cross-Site-Anfrage.

+0

Es ist eigentlich eine CORS-Anfrage, danke, ich habe es total vergessen zu erwähnen! Aber selbst mit 'withCredentials: true' bleibt der Fehler bestehen. –

+0

Scheitert die OPTIONS-Anfrage oder die Folge bei GET? – theleebriggs

+0

Ich weiß es nicht wirklich, da ich zum ersten Mal so eng mit REST arbeite. Aber in meiner Konsole sehe ich zuerst 'OPTIONS' URL 401 (Authorization Required) 'und dann' XMLHttpRequest kann 'URL' nicht laden. Die Antwort auf die Preflight-Anforderung übergibt die Zugriffskontrollprüfung nicht: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'http: // localhost: 9000' ist daher nicht erlaubt. Die Antwort hatte den HTTP-Statuscode 401.'. Aber die zweite Nachricht ist seltsam, da Access-Control-Allow-Origin auf "*" gesetzt sein sollte. Wie kann ich das weiter untersuchen? –

0

Nach ihrer docs, hat MailChimp nicht clientseitige Anforderungen unterstützen, so dass Sie es durch serverseitige Zustieg:/

0

So suchte ich zum Beispiel, wie man einen Beitrag für diese und couldn zu tun Ich finde keinen guten. Es funktioniert und es sieht so aus:

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}` 
    } 
});