Whats the difference between calling a URL using XMLHttpRequest and a Form?

Question

I'm using static html/javascript pages (no php, etc.)

I have a static HTML web page. When the page loads, it makes an XMLHttpRequest to a target server on another domain, waits for the response, and parses the response JSON.

  function executeRequest() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var response = JSON.decode(xhttp.responseText);
        alert(response.access_token)
        alert(response.expires_in)
      }
    };
    var tmpURL = "https://target.url.com/oauth2/access_token"
    xhttp.open("POST", tmpURL, true);
    xhttp.send();
  }

XMLHttpRequest cannot load [target.url.com] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://local.url.com' is therefore not allowed access.

To rule out a problem with CORS, I can request the URL with a form. When the user clicks the Submit button, it brings a successful response.

<form method="POST" action="https://target.url.com/oauth2/access_token">
  ... form inputs here
  <input type="submit" value="Submit form">
</form>

Why is the target server responding differently to the xmlHttpRequest than the Form?

*"To rule out a problem with CORS, I can request the URL with a form."* That doesn't rule or CORS, CORS does not apply to cross-domain form posting. Basically sending data cross-origin is allowed, but reading data cross-origin is where CORS comes in. Your issue is CORS. — Alexander O'Mara, Feb 19 '16 at 08:15
you have a CORS problem if you get a `No 'Access-Control-Allow-Origin' header is present` error ... and look, you do get one of those — Jaromanda X, Feb 19 '16 at 08:16

score 2 · Accepted Answer · edited May 23 '17 at 11:59

2

You have a CORS issue.

XMLHttpRequests are subject to CORS rules.

<form method="POST" action="http://xxx"> posts done purely with HTML are not subject to CORS rules.

It's as simple as that.

Part of the reason this cross origin form post is allowed is that the browser will change the browser window to display the response from the form post so the cross origin site controls what happens next. That is not the case with XMLHttpRequest where the requesting page controls what happens next as no page is automatically loaded or displayed after an XMLHttpRequest. So, it's easier to cause mischief with XMLHttpRequest than it is with a form post.

See Cross Domain Form POSTing for some further explanation.

edited May 23 '17 at 11:59

Community

1
1

answered Feb 19 '16 at 08:18

jfriend00

683,504
96
985
979

The response from the target is simply JSON data (not a user friendly web page) that doesn't redirect back to my domain. If I can't "wrap" this request/response in my page, how do I consume the data that it provides (recall that I'm confined to static pages no php, etc.)? – torpedo51 Feb 19 '16 at 20:07
@torpedo51 - Obviously, you need Javascript to consume JSON into something that can be displayed in the browser. Therefore, you need to use an `XMLHttpRequest`, therefore if you want to go directly to a cross origin domain, you need that domain to permit you to do that with CORs. If you can't do that, then you may have to proxy it from your own domain, either the same domain of the web page so no CORs issues or from your own domain where you can enable CORs. – jfriend00 Feb 19 '16 at 20:22

Whats the difference between calling a URL using XMLHttpRequest and a Form?

1 Answers1