CODEWITHSUNDEEP
javascriptgithub-pages
MickDom
MickDom

Reputation: 157

No 'Access-Control-Allow-Origin' header is present on the requested resource. with github sites

http://kingdiepie.github.io/testing.html

XMLHttpRequest cannot load https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://kingdiepie.github.io' is therefore not allowed access.

I have a github sites page and am trying to grab data from google sheets to create a html table, the code works fine on localhost but does not work when it's online. 

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>




  <head>
    <style>
      table.sortable thead {
        background-color: #eee;
        color: #666666;
        cursor: default;
      }
      /* Scrollability of table */
      table {
        width: 800px;
      }
      /* fixed width table */
      thead tr {
        display: block;
      }
      /* makes it sizeable */
      tbody {
        display: block;
        /* makes it sizeable */
        height: 600px;
        /* height of scrollable area */
        overflow: auto;
        /* scroll rather than overflow */
        width: 100%;
        /* fill the box */
      }
      thead th {
        width: 100px;
      }
      /* fixed width for THs */
      tbody td {
        width: 100px;
      }
      /* fixed width for TDs */
      table {
        color: #333;
        font-family: Helvetica, Arial, sans-serif;
        border-collapse: collapse;
        border-spacing: 0;
      }
      td,
      th {
        border: 1px solid transparent;
        /* No more visible border */
        height: 30px;
        transition: all 0.3s;
        /* Simple transition for hover effect */
      }
      th {
        background: #3086C2;
        /* Darken header a bit */
        font-weight: bold;
        color: white;
      }
      td {
        background: #000000;
        text-align: center;
      }
      /* Cells in even rows (2,4,6...) are one color */
      tr:nth-child(even) td {
        background: #EBEBF7;
      }
      /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */
      tr:nth-child(odd) td {
        background: #FEFEFE;
      }
      tr td:hover {
        background: #3086C2;
        color: #FFF;
      }
      /* Hover cell effect! */
      body {
        margin: 0;
      }
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 10%;
        background-color: #f1f1f1;
        position: fixed;
        height: 100%;
        overflow: auto;
      }
      li a {
        display: block;
        color: #000;
        padding: 8px 0 8px 16px;
        text-decoration: none;
      }
      li a.active {
        background-color: #3086C2;
        color: white;
      }
      li a:hover:not(.active) {
        background-color: #DFDFDF;
        color: #3086C2;
        font-weight: bold;
      }
      a:visited {
        color: #000000;
        text-decoration: none
      }
      a:link {
        color: #000000;
        text-decoration: none
      }
      table.sortable thead {
        background-color: #eee;
        color: #666666;
        font-weight: bold;
        cursor: default;
      }
    </style>
  </head>




</head>

<body>

  <script>
    var url = "https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv";
    var cols = 8;
    var table = "<table class=\"sortable\" cellpadding=\"5\" id=\"theTable\">";
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {
        theData = xmlhttp.responseText;
        console.log(theData.substring(0));
        var rows = (theData.substring(0).split('"').length - 1) / 2 - 1;
        for (i = 0; i < rows; i++) {
          table += "<tr>"
          for (j = 0; j < cols; j++) {
            if (j == 0 || j == 5) {
              idx = theData.indexOf(',');
              theData = theData.substring(idx + 1)
            }
            if (i === 0) {
              table += '<th>';
              if (j === 7) {
                idx = theData.indexOf("\n");
                table += theData.substring(0, idx + 1);
                theData = theData.substring(idx + 1);
              } else {
                idx = theData.indexOf(',');
                table += theData.substring(0, idx + 1);
                theData = theData.substring(idx + 1);
              }

              if (table.lastIndexOf(",") === table.length - 1) {
                table = table.substring(0, table.length - 1);
              }
              table += '</th>';
            } else {
              table += "<td>"
              if (j === 7) {
                idx = theData.indexOf("\n");
                if (idx === -1) {
                  idx = theData.length;
                }
                table += theData.substring(0, idx + 1);
                theData = theData.substring(idx + 1);
              } else if (j != 5 && j != 6) {
                idx = theData.indexOf(',');
                table += theData.substring(0, idx + 1);
                theData = theData.substring(idx + 1);

              } else {

                theData = theData.substring(1);
                idx = theData.indexOf('"');
                data2 = theData.substring(0, idx);
                theData = theData.substring(idx + 1);
                theData = theData.substring(1);
                l = data2.substring(0).split(',').length;
                for (k = 0; k < l; k++) {
                  console.log(data2);
                  idx = data2.indexOf(",")
                  if (idx === -1) {
                    idx = data2.length;
                  }
                  table += data2.substring(0, idx);
                  table += "<br>"
                  data2 = data2.substring(idx + 1);
                }
              }
              if (table.lastIndexOf(",") === table.length - 1) {
                table = table.substring(0, table.length - 1);
              }
              table += "</td>"
            }
          }
          table += "</tr>"

        }
        table += "</table>"
        document.getElementById("display").innerHTML = table;
        var newTableObject = document.getElementById('theTable');
        sorttable.makeSortable(newTableObject);
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
  </script>

  <div id="display"></div>
</body>

Upvotes: 3

Views: 2141

Answers (1)

Jason Yost
Jason Yost

Reputation: 4937

From: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

A resource makes a cross-origin HTTP request when it requests a resource from a different domain than the one which the first resource itself serves. For example, an HTML page served from http://domain-a.com makes an src request for http://domain-b.com/image.jpg. Many pages on the web today load resources like CSS stylesheets, images and scripts from separate domains.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

The W3C Web Applications Working Group recommends the new Cross-Origin Resource Sharing (CORS) mechanism. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers. Modern browsers use CORS in an API container - such as XMLHttpRequest - to mitigate risks of cross-origin HTTP requests.

The error message you receive: No 'Access-Control-Allow-Origin' header is present on the requested resource

Is telling you that Google does not allow the https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv resource to be cross domain.

Upvotes: 1

Related Questions