Mailgun + AngularJS + Auhtentication for http post

Question

I am trying to convert below sample code in angular request.

https://documentation.mailgun.com/user_manual.html#sending-via-api

curl -s --user 'api:YOUR_API_KEY' \
    https://api.mailgun.net/v3/YOUR_DOMAIN_NAME/messages \
    -F from='Excited User <mailgun@YOUR_DOMAIN_NAME>' \
    -F to=YOU@YOUR_DOMAIN_NAME \
    -F to=[e-mail] \
    -F subject='Hello' \
    -F text='Testing some Mailgun awesomness!'

I have tried below with Authorization headers which still comes back with Unauthorized error. I see request header has authorization field set with value. What am I doing wrong?

    var url = "https://api.mailgun.net/v3/sandboxXXXXXXXXXXXXXXXXX.mailgun.org/messages";
    var dataFields = {
        to: "verified recepient",
        subject: "subject",
        text: "text",
        from: "postmaster address of sandbox domain"
    }

    var req = {
        method : 'POST',
        url: url,
        headers : {
            'Authorization' : 'Basic api:key-XXXXXXXXXXXXXXXX'
        },
        data: dataFields
    }
    $http(req).then(function(data){
        console.log(data);
    }, function(data){
        console.log(data);
    })

Answer 1

Finally got it working from local machine - collective information from different post and using this plugin - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi - I was able to make it work. So what does this plugin does? can I do this in my post request?

Without that it gives me error

XMLHttpRequest cannot load https://api.mailgun.net/v3/sandboxXXXXXXXXXX.mailgun.org/messages. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

---

var url = "https://api.mailgun.net/v3/sandboxXXXXXXXXXXXXXXX.mailgun.org/messages";
        var dataJSON = {
            from: "[e-mail]",
            to: "registered recepient",
            subject: "Subject text",
            text: "Body text",
            multipart: true
        }

        var req = {
            method : 'POST',
            url: url,
            headers : {
                'content-type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + $base64.encode('api:key-XXXXXXXXXXXXX')
            },
            transformRequest: function(obj) {
                var str = [];
                for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                return str.join("&");
            },
            data: dataJSON
        }
        $http(req).then(function(data){
            console.log(data);
        }, function(data){
            console.log(data);
        })

• Things which I was missing.
• Multipart
• context type
• encodedURIComponent - for parameters
• base64 encoded api key

Answer 2

Try to add username: 'api', password: 'yourapikey',

in your header request