XMLHttpRequest 'Access-Control-Allow-Origin' Error

Question

I am writing a web-based application where I need to access the txt file that is hosted online and read the file. I am using following code to do it:

var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function(){ // parse the file } }) oReq.open("GET","https://bahadorsaket.com/others/ranking.txt"); oReq.send();

I got this error:

Failed to load https://bahadorsaket.com/others/ranking.txt: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

After searching and reading this post, I tried changing my code to this.

var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function(){ // parse the file } }) oReq.setRequestHeader( 'Access-Control-Allow-Origin', '*'); oReq.open("GET","https://bahadorsaket.com/others/ranking.txt"); oReq.send();

This time I got this error:

Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

Any idea how to fix this problem? I am very new to these kinds of stuff!!!

Browsers will not allow your code to fetch content from other domains unless those servers provide the access control headers. You cannot fix it unless you have control over the target domains. — Pointy
– Pointy, Commented Feb 16, 2018 at 23:43
@Pointy Thanks for the response. I have control over the target domain. how can I fix it? Is there another place where I can host my txt file so that I dont have to deal with this error? — Bahador Saket
– Bahador Saket, Commented Feb 16, 2018 at 23:44
The access control headers need to be set by the server, not the client. If you have control of the target server, then you just need to configure it with those "CORS" headers (google CORS). How exactly you do that depends on the specifics of the server. — Pointy
– Pointy, Commented Feb 16, 2018 at 23:51

BrettC · Accepted Answer · 2018-02-16 23:49:24Z

Although not the best method, you can use a proxy also.

$.ajaxPrefilter( function (options) { if (options.crossDomain && jQuery.support.cors) { var http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); options.url = http + '//cors-anywhere.herokuapp.com/' + options.url; //options.url = "http://cors.corsproxy.io/url=" + options.url; } }); $.get( 'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing', function (response) { console.log("> ", response); $("#viewer").html(response); });

I used this in the past and it worked very well.

Taken from this post.

Sina · Accepted Answer · 2020-08-04 23:37:02Z

For the specific error:

Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.

It's because you're setting the header before invoking the open method on the XMLHttpRequest object. Reordering to this will fix that specific error:

var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function(){ // parse the file } }) oReq.open("GET","https://bahadorsaket.com/others/ranking.txt"); oReq.setRequestHeader( 'Access-Control-Allow-Origin', '*'); oReq.send();

But like the others have mentioned, you may then face other issues if the backend server isn't configured to support CORS.

Collectives™ on Stack Overflow

XMLHttpRequest 'Access-Control-Allow-Origin' Error

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related