Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Daniel Abbott
Daniel Abbott
14,330 Points

How to setRequestHeader correctly for AJAX request

I'm trying to send a request to another server, TechData, for an XML file. I keep getting the error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

This is my Code:

function createCORSRequest(POST, tdUrl){ if ("withCredentials" in techdataRequest){ techdataRequest.open("POST", tdURL, true); } else if (typeof XDomainRequest != "undefined"){ techdataRequest = new XDomainRequest(); techdataRequest.open("POST", tdURL); } else { techdataRequest = null; } return techdataRequest; } 

    var techdataRequest = createCORSRequest("POST", tdUrl);
      if (techdataRequest){
      techdataRequest.onload = function (xmlPriceAvailabilitySubmit) {
        // Check Ready state 4 and 200
        if (techdataRequest.readyState === 4 && techdataRequest.status === 200) {
             // Create XML Document Object and load with XML Response
            var xmlDoc = techdataRequest.responseText;

            console.log(xmlDoc);

            // Parse data into the div id=test
            document.getElementById("order-status").innerHTML = xmlDoc;
            }; 
          console.log(techdataRequest);
          }
        techdataRequest.setRequestHeader(userName, password);
        techdataRequest.setRequestHeader("Accept", "text/xml");
        techdataRequest.send(xmlPriceAvailabilitySubmit);
      }

What is wrong with my Headers to allow access?

Daniel Abbott
Daniel Abbott
14,330 Points

Just Cleaning up my Question:

The is the error I get: html No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

function createCORSRequest(POST, tdUrl){
    if ("withCredentials" in techdataRequest){
       techdataRequest.open("POST", tdURL, true); } 
else if (typeof XDomainRequest != "undefined"){ 
   techdataRequest = new XDomainRequest(); 
   techdataRequest.open("POST", tdURL); } 
else { techdataRequest = null; } 
   return techdataRequest; }

   var techdataRequest = createCORSRequest("POST", tdUrl);
      if (techdataRequest){
      techdataRequest.onload = function (xmlPriceAvailabilitySubmit) {
        // Check Ready state 4 and 200
        if (techdataRequest.readyState === 4 && techdataRequest.status === 200) {
             // Create XML Document Object and load with XML Response
            var xmlDoc = techdataRequest.responseText;

            console.log(xmlDoc);

            // Parse data into the div id=test
            document.getElementById("order-status").innerHTML = xmlDoc;
            }; 
          console.log(techdataRequest);
          }
        techdataRequest.setRequestHeader(userName, password);
        techdataRequest.setRequestHeader("Accept", "text/xml");
        techdataRequest.send(xmlPriceAvailabilitySubmit);
      }