Mailgun API: поле заголовка запроса Авторизация не разрешена Access-Control-Allow-Headers - PullRequest
Новая
       14

Mailgun API: поле заголовка запроса Авторизация не разрешена Access-Control-Allow-Headers

0 голосов
/ 28 апреля 2018

Как мне настроить мой .htaccess в моем приложении AngularJS, чтобы предотвратить следующее сообщение об ошибке:

Не удалось загрузить https://api.mailgun.net/v3/example.com/messages: Поле заголовка запроса Авторизация не разрешена Access-Control-Allow-Headers в предполетном ответе.

Вот мой .htaccess файл: 

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Content-Type, Authorization"
Header add Access-Control-Allow-Methods "GET, POST"
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html
</IfModule>

Я получаю сообщение об ошибке на своем веб-сайте здесь , когда пользователь пытается отправить контактную форму.

Это мой код для процесса: 

function send(apiUrl, from, to, subject, body, apiKey) {
  var url = apiUrl;
  var dataJSON = {
    from: from,
    to: to,
    subject: subject,
    text: body,
    multipart: true
  };

  var req = {
    method: 'POST',
    url: url,
    headers: {
      'content-type': 'application/x-www-form-urlencoded',
      'Authorization': 'Basic ' + $base64.encode('api:'+apiKey)
    },
    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) {
    if(data.data) {
      if(data.data.message === 'Queued. Thank you.') {
        $window.alert('Sent. Thank you.');
      }
      else {
        $window.alert(data.data.message);
      }
    }
    else {
      $window.alert('An error has occured. Please try again.');
    }
  }, function (data) {
    if(data.data) {
      if(data.data.message === 'Queued. Thank you.') {
        $window.alert('Sent. Thank you.');
      }
      else {
        $window.alert(data.data.message);
      }        }
    else {
      $window.alert('An error has occured. Please try again.');
    }
  });
}

1 Ответ

0 голосов
/ 29 апреля 2018

Вы не можете делать аутентифицированные запросы к API Mailgun из внешнего кода JavaScript, запущенного в браузере. Mailgun API намеренно не поддерживает это, согласно собственной документации :

ПРИМЕЧАНИЕ. При использовании в браузере для связи с API Mailgun требуется прокси-сервер из-за ограничений cors. Кроме того, не публикуйте свой закрытый ключ API в коде внешнего интерфейса.

В частности, для запросов из внешнего кода JavaScript, выполняемого в браузерах, API Mailgun не разрешает заголовок запроса Authorization. Вы можете проверить это с помощью curl или таких: 

$ curl -X OPTIONS -H "Origin: https://marquesslondon.com" \
       -i https://api.mailgun.net/v3/marquesslondon.com/messages

HTTP/1.1 200 OK
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

Обратите внимание, что значение заголовка ответа Access-Control-Allow-Headers, которое возвращает конечная точка, не включает Authorization. Это означает, что браузеры будут блокировать ваш JavaScript-код от отправки конечной точке API любого запроса, который содержит заголовок запроса Authorization.

Что касается ваших изменений в файле .htaccess для сайта http://marquesslondon.com, то они не нужны и не имеют значения; это не имеет значения, какие заголовки CORS вы возвращаете с этого (вашего) сайта, потому что это просто сайт, инициирующий запрос - вы не отправляете никаких запросов на перекрестного происхождения.

Вместо этого важны заголовки CORS, возвращаемые сайтом, которым вы фактически отправляете запрос к кросс-источнику, то есть https://api.mailgun.net. И, как объяснено выше, этот сайт возвращает заголовок ответа CORS Access-Control-Allow-Headers, который говорит браузерам не разрешать запросы, содержащие заголовок Authorization - и это приводит к тому, что вы видите поле заголовка запроса. Авторизация не разрешена сообщение об ошибке, цитируемое в вопросе.

...