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
– Alexander O'Mara, Commented Feb 19, 2016 at 8: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
– Jaromanda X, Commented Feb 19, 2016 at 8:16

Community · Accepted Answer · 2017-05-23 11:59:28Z

3

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, 2017 at 11:59

CommunityBot

11 silver badge

answered Feb 19, 2016 at 8:18

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

torpedo51 Over a year ago

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.)?

jfriend00 Over a year ago

@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.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related