Mailgun API：Access-Control-Allow-Headers 不允许请求 header 字段授权

Question

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

Failed to load https://api.mailgun.net/v3/example.com/messages: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

这是我的 .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>

每当用户尝试提交联系表单时，我的网站 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.');
    }
  });
}

Answer 1

您无法在浏览器中从前端 JavaScript 代码运行向 Mailgun API 发出经过身份验证的请求。 Mailgun API 故意不支持，per their own documentation:

NOTE: If used in the browser, a proxy is required to communicate with the Mailgun api due to cors limitations. Also, do not publish your private api key in frontend code.

具体来说，对于浏览器中来自前端 JavaScript 代码运行的请求，Mailgun API 不允许 Authorization 请求 header。您可以使用 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 响应的值 header，端点 returns 不包括 Authorization。这意味着浏览器将阻止您的前端 JavaScript 代码向 API 端点发送任何包含 Authorization 请求 header.

的请求

就您对 http://marquesslondon.com 站点的 .htaccess 文件所做的更改而言，这些更改是不必要且无关紧要的；您从那个（您的）网站 return 使用什么 CORS header 并不重要，因为它只是发起请求的网站 — 您没有向 发送任何请求它cross-origin.

相反，重要的是您实际向 cross-origin 发送请求的站点 return 的 CORS header，即 https://api.mailgun.net。如上所述，该站点 return 的 CORS Access-Control-Allow-Headers 响应 header 告诉浏览器不允许包含 Authorization header 的请求——这就是结果在您看到问题中引用的 Request header 字段 Authorization is not allowed 错误消息时。

Mailgun API：Access-Control-Allow-Headers 不允许请求 header 字段授权

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

javascript

.htaccess

cors

mailgun