CODEWITHSUNDEEP
javascriptajax.htaccesscors
Cam
Cam

Reputation: 970

CORS - No 'Access-Control-Allow-Origin' header is present

I'm hosting a website that has a number of different domain names pointing at it.

lets call the hosted website example.com and the url-forwarded domain names - example-x.com, example-y.com, example-z.com

When the url-forwarded domains are visited, cross domain requests are made back to the host site, example.com.

I'm currently making ajax GET requests to json files and receiving the following error;

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example-x.com' is therefore not allowed access.

Even though the preflight OPTIONS return a status of 200 and the GET method returns a status of 200.

OPTIONS;

enter image description here

GET enter image description here

I have set the following CORs headers on the host htaccess;

# <IfModule mod_headers.c>
   SetEnvIfNoCase Origin "https?://(www\.)?(example-x\.com|example-y\.com|example-z\.com)(:\d+)?$" ACAO=$0
   Header set Access-Control-Allow-Origin %{ACAO}e env=ACAO
   Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE, OPTIONS"
  Header set Access-Control-Allow-Headers "DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range"
Header set Access-Control-Allow-Credentials true
# </IfModule>

And i'm call GET using the following ajax request;

var createCORSRequest = function(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) { 
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest !== "undefined") { 
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else { 
        xhr = null;
    }
    return xhr;
}; 

var url = 'http://example.com/data.json'; 
var xhr = createCORSRequest('GET', url);
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.setRequestHeader('Accept', 'application/json, text/javascript');  
xhr.onload = function() { console.log('success');}; 
xhr.onerror = function() { console.log('error'); }; 
xhr.send();

EDIT

Removing setRequestHeader("Content-Type", "application/json; charset=UTF-8") from the ajax request has removed the preflight requirement, however the CORs error still persists, the screenshot below shows the request / response of GET, its my guess that the correct htaccess headers have not been set on the RequestURL - http://example.com/cms/wp-content/uploads/2017/04/preloader_data.json

GET - WITHOUT OPTIONS PREFLIGHT enter image description here

Upvotes: 2

Views: 9649

Answers (1)

ykaragol
ykaragol

Reputation: 6221

You are trying to retrieve a json by a GET request. This should be a simple request, and it does not need to have a preflight request.

If you look at the requirements for a preflight request from MDN, you can see that setting Content-Type other than application/x-www-form-urlencoded, multipart/form-data or text/plain will cause this preflighted request.

If you look at the content-type from the RFC, it is a "SHOULD" for "a message containing a payload body". But your get request does not have a payload. As a result remove that header from your ajax call.

Upvotes: 1

Related Questions