How do I set up my .htaccess on my AngularJS application to prevent the following error message:
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.
Here is my .htaccess file:
<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>
I am getting the error message on my website here, whenever the user tries to submit the contact form.
This is my code for the process:
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.');
}
});
}