个人中心
gpt4 book ai didi

javascript - 请求的资源上不存在 'Access-Control-Allow-Origin' header 。与 github 网站

转载 作者：行者123 更新时间：2023-11-30 00:02:21 25 4
gpt4 key购买 nike

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

XMLHttpRequest 无法加载 https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv .请求的资源上不存在“Access-Control-Allow-Origin” header 。产地' http://kingdiepie.github.io ' 因此不允许访问。

我有一个 github 站点页面，我正在尝试从 google 表格中获取数据以创建一个 html 表格，该代码在本地主机上运行良好，但在联机时不起作用。 

<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>

最佳答案

发件人: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.

您收到的错误消息:请求的资源上不存在“Access-Control-Allow-Origin” header

告诉您 Google 不允许 https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv资源要跨域。

关于javascript - 请求的资源上不存在 'Access-Control-Allow-Origin' header 。与 github 网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39926391/

25 4 0
文章推荐： javascript - 如何在没有 gulp/grunt/webpack 的情况下将 google-closure-compiler-js 用于 node.js 应用程序？
文章推荐： mysql - 如何使用 Webuzo 在 Centos 服务器上禁用自动终止
文章推荐： php - Laravel 4，困惑的 Eloquent 连接查询
文章推荐： javascript - 确定 Node 流是否处于 objectMode
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com