AJAX function w/ Mailgun, getting “ERROR Request header field Authorization is not allowed by Access-Control-Allow-Headers”

Question

I'm working on making an AJAX call that hit the Mailgun API to send email. Documentation on Mailgun says that post requests should be made to "https://api.mailgun.net/v3/domain.com/messages". I've included my api key as specified by mailgun (they instruct to use a username of 'api'). Since this involves CORS, I can't get past the error: Request header field Authorization is not allowed by Access-Control-Allow-Headers.

However, I've inspected the requests/responses in the Network tab and "Access-Control-Allow-Origin" in the response from Mailgun is set to "*"...which should indicate that it should allow it? (See request/response below): I've edited the actual domain and my API key.

Remote Address:104.130.177.23:443
Request URL:https://api.mailgun.net/v3/domain.com/messages
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, authorization
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.mailgun.net
Origin:null
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:Content-Type, x-requested-with
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:600
Allow:POST, OPTIONS
Connection:keep-alive
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Fri, 20 Mar 2015 19:47:29 GMT
Server:nginx/1.7.9

My code for the ajax call is below, in which I include my credentials in the headers and the domain to where the post is supposed to go. Not sure what's causing this not to work. Is it because I'm testing on local host? I didn't think that would make a difference since the "Access Control Allow Origin:*" in the response header. Any help would be greatly appreciated! Thank you.

function initiateConfirmationEmail(formObj){

  var mailgunURL;
  mailgunURL = "https://api.mailgun.net/v3/domain.com/messages"
  var auth = btoa('api:MYAPIKEYHERE');

    $.ajax({
    type     : 'POST',
    cache    : false,
    headers: {"Authorization": "Basic " + auth},
    url      : mailgunURL,
    data     : {"from": "emailhere", "to": "recipient", etc}, 
    success  : function(data) {
      somefunctionhere();
    },
    error  : function(data) {
      console.log('Silent failure.');
    }
  });
  return false;
}

You may need to add Access-Control-Allow-Headers: Authorization per the error. — Drazisil
@Drazisil thanks for the reply but don't I need to have access to mailgun's servers to be able to do this (since it's a request from localhost to mailgun)? where would I add this? — DanielleCS
My apologies, I was thinking those were the request headers. I think the problem may be that you are trying to pass basic authentication at all, that's normally what the API key is for. I'm not seeing that in documentation.mailgun.com/api-sending.html#examples, I may defer to someone who knows the API. — Drazisil
if you don't need a response, you can just use a form to POST it instead of ajax — dandavis
@Cooluhuru I spoke to someone at Mailgun because I was curious and they said that you face problems with authentication and the Access-Control-Allow-Headers when Ajax/JS is used. The authentication they require doesn't work with the Access-Control-Allow-Headers and they do this intentionally so users don't expose API keys. I would have thought there was a way around this but I guess not. — DanielleCS

Anne Anne · Accepted Answer · 2015-08-28T02:31:53

Drazisil is correct above. The response needs to include Access-Control-Allow-Headers: Authorization as you are including that header in your request and Authorization is not a simple header.

AJAX function w/ Mailgun, getting “ERROR Request header field Authorization is not allowed by Access-Control-Allow-Headers”

1 Answers