Reputation: 451
I'm trying to add emails to a mailchimp account, but I'm also trying to do some other stuff with javascript after I collect the email, here's my javascript:
function addEmail(){
var request = new XMLHttpRequest();
request.open('POST', 'https://EXTERNAL_URL', true);
var data = document.getElementById("mce-EMAIL").value;
request.send("EMAIL=" + data);
}
I get the standard No 'Access-Control-Allow-Origin' header is present on the requested resource.' error
But when I do it by a form submission in HTML, I don't get an error, below is my HTML:
<form action="https://EXTERNAL_URL" method="POST" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form">
<div id="mc_embed_signup_scroll" class="info-title-small">
<input type="email" name="EMAIL" id="mce-EMAIL">
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_77582e128704b86e538075b23_47bb2d7f84" tabindex="-1">
</div>
<div class="clear">
<input type="submit" value="add me" name="subscribe" id="mc-embedded-subscribe">
</div>
</div>
</form>
What's going on?
Upvotes: 2
Views: 122
Reputation: 17661
The same-origin policy is primarily concerned with JavaScript (or other browser-side programming languages) reading the server's response to a client request. Your form submission does not violate the same-origin policy and is not blocked because it doesn't process a server response.
According to MDN:
Cross-origin writes are typically allowed. Examples are links, redirects and form submissions. Certain rarely used HTTP requests require preflight.
Cross-origin embedding is typically allowed.
Cross-origin reads are typically not allowed, but read access is often leaked by embedding. For example, you can read the width and height of an embedded image, the actions of an embedded script, or the availability of an embedded resource.
Upvotes: 3