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

Question

我如何在我的AngularJS应用程序上设置.htaccess，以防止出现以下错误消息： “无法加载https://api.mailgun.net/v3/example.com/messages:请求标题字段Authorization未被预检响应中的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.');
    }
  });
}

- methuselah

---

通常这是在服务器代码上设置的，而不是在.htaccess上，但是关于后端没有任何信息。 - desoares

我正在使用Godaddy的WordPress托管套餐。 - methuselah

你看过这里吗？https://dev59.com/rl8e5IYBdhLWcg3wdqKT - desoares

通常是Apache / nginx配置问题。 - Mason Stedman

Answer 1

你不能从运行在浏览器中的前端JavaScript代码向Mailgun API发出经过身份验证的请求。根据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

注意API端点返回的Access-Control-Allow-Headers响应头的值不包括Authorization。这意味着浏览器将阻止您的前端JavaScript代码发送包含Authorization请求头的任何请求到API端点。

至于您对http://marquesslondon.com网站的.htaccess文件所做的更改，这些更改是不必要和无关紧要的；因为它只是网站启动了请求，而没有跨域发送任何请求，所以从该（您的）网站返回的CORS标头并不重要。

相反，重要的是您实际上正在跨域发送请求的站点返回的CORS标头，即https://api.mailgun.net。正如上文所述，该站点返回一个CORS Access-Control-Allow-Headers响应头，告诉浏览器不允许包含Authorization头的请求 - 这就是导致您看到引用问题的 Request header field Authorization is not allowed 错误消息的原因。

- sideshowbarker