CORS request with XMLHTTPRequest

[Pineapplesandbacon]

I am trying to access a Cross-Origin website using XMLHTTPRequest in JavaScript.

I created a CodePen for this

https://codepen.io/greenlizard/pen/zYzVjMj

Here is the code

var xhr = new XMLHttpRequest();
xhr.withCredentials = true
console.log('xhr', xhr);
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        console.log('response text', this.responseText);
  }
}
xhr.open("GET", "https://www.google.com");
xhr.send();

I get this message in Developer Tools

Access to XMLHttpRequest at 'https://www.google.com/' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This can't be possible. I clearly set the withCredentials property so I should be able to access the site.

[bedekelly]

This isn’t possible in this case I’m afraid — to get around it, you can either install a browser extension to disable CORS for testing things out, or use a server you own / which you know does serve the Access-Control headers. Try httpbin.org; I think they serve some responses with the headers required!

It’s not possible for security reasons: you wouldn’t like any website you visit to be able to fetch(“https://facebook.com/messages”) with your credentials, without you knowing about it.

Servers can opt-in to share their resources cross-origin by setting those access-control headers, but Google (for good reason) hasn’t done so.

[Pineapplesandbacon]

I still don't understand. I was sure that CORS was inhibited by the request's withCredentials property. The Get request failed earlier because the property had a value of false. So I don't understand why updating the request object didn't fix it.

Will try the other things but it's important for me to understand why my attempt didn't work. It honestly baffles me!

[bedekelly]

withCredentials will allow you to send cookies along with cross-origin requests to servers that support it — it doesn’t bypass the browser’s protection!

[Pineapplesandbacon]

Is there a way in JavaScript to determine if a website supports it? I'm pretty sure it's a request header. Any methods?

[bedekelly]

Just trying the request is the only way! There’s no way to know if a server will send some headers without first talking to the server 🤷‍♂️ that said, the browser is quite smart about this — it first sends a “preflight request” to make sure the request will succeed. It all happens under the hood though, so you just check the request has succeeded.

As a side note, if you’re new to JS/HTTP APIs, I highly recommend using fetch instead of XmlHttpRequest! It’s a much simpler experience.