邮件枪 API:请求标头字段 访问控制允许标头不允许授权

Question

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

无法加载https://api.mailgun.net/v3/example.com/messages： 请求标头字段 不允许授权 预检响应中的访问控制允许标头。

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

Answer 1

您无法从浏览器中运行的前端 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请求标头的请求。

至于您对http://marquesslondon.com站点的.htaccess文件的更改，这些更改是不必要的和无关紧要的;从该(您的)站点返回哪些CORS标头并不重要，因为它只是发起请求的站点 - 您不会跨源向其发送任何请求。

相反，重要的是您实际向跨源发送请求的站点返回的 CORS 标头，这https://api.mailgun.net.如上所述，该站点返回一个 CORSAccess-Control-Allow-Headers响应标头，该标头告诉浏览器不允许包含Authorization标头的请求 - 这就是导致您看到请求标头字段不允许授权错误信息的原因问题中引用。