Mailgun API：请求头字段Authorization不被Access-Control-Allow-Headers允许。

7 浏览
0 Comments

Mailgun API：请求头字段Authorization不被Access-Control-Allow-Headers允许。

如何在我的AngularJS应用程序中设置我的.htaccess文件以防止出现以下错误消息：

无法加载https://api.mailgun.net/v3/example.com/messages：

预检响应中不允许请求头字段Authorization。

这是我的.htaccess文件：

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

每当用户尝试提交联系表单时，我在我的网站here上收到错误消息。

这是我处理的代码：

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.');
    }
  });
}

0

1 答案

0 Comments

Mailgun API: Request header field Authorization is not allowed by Access-Control-Allow-Headers

问题原因：无法在浏览器中的前端JavaScript代码中对Mailgun API进行身份验证请求。Mailgun API有意不支持这个功能，根据他们自己的文档说明：

注意：如果在浏览器中使用，由于cors的限制，需要使用代理与Mailgun api通信。此外，不要将私有api密钥发布在前端代码中。

具体而言，对于在浏览器中运行的前端JavaScript代码发起的请求，Mailgun API不允许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站点来说，这些更改是不必要和无关紧要的；因为它只是发起请求的站点，不会跨域发送任何请求。

更重要的是实际发送跨域请求的站点（https://api.mailgun.net）返回的CORS头。正如上面所解释的，该站点返回了一个CORS Access-Control-Allow-Headers响应头，告诉浏览器不允许包含Authorization头的请求。这就是导致您看到问题中引用的“Request header field Authorization is not allowed”错误信息的原因。

解决方法：由于Mailgun API不支持在浏览器中使用前端JavaScript代码进行身份验证请求，解决办法是使用代理来与Mailgun API进行通信。这样可以绕过浏览器的CORS限制。

文章整理自问题来源相关内容，仅供参考。

0