所请求的资源上没有"Access-Control-Allow-Origin"标头.与github网站 [英] No 'Access-Control-Allow-Origin' header is present on the requested resource. with github sites
问题描述
http://kingdiepie.github.io/testing.html
XMLHttpRequest无法加载 https://docs.google .com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output = csv .所请求的资源上没有"Access-Control-Allow-Origin"标头.因此，不允许访问来源" http://kingdiepie.github.io .
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.
我有一个github网站页面，正在尝试从Google表格中获取数据以创建html表，该代码在localhost上运行良好，但在联机时不起作用.
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>
推荐答案
来自:
当资源从与第一个资源本身所服务的域不同的域中请求资源时，它将发出跨域HTTP请求.例如，从 http://domain-a.com 提供的HTML页面对 http://domain-b.com/image.jpg .如今，网络上的许多页面都从不同的域加载资源，例如CSS样式表，图像和脚本.
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. 出于安全原因，浏览器限制了从脚本内部发起的跨域HTTP请求.例如，XMLHttpRequest遵循同源策略.因此，使用XMLHttpRequest的Web应用程序只能向其自己的域发出HTTP请求.为了改进Web应用程序，开发人员要求浏览器供应商允许XMLHttpRequest进行跨域请求. 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. W3C Web应用程序工作组建议使用新的跨域资源共享(CORS)机制. CORS为Web服务器提供了跨域访问控制，可实现安全的跨域数据传输.现代浏览器在API容器(例如XMLHttpRequest)中使用CORS来减轻跨源HTTP请求的风险. 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. 您收到的错误消息: 告诉您Google不允许 https://docs.google.com/spreadsheets/d/1_4d-MPxTUOVZbxTOlhjXv1ebTlBPQ-_JrYUlS1rqX5Q/pub?output=csv 资源是跨域的. 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. 这篇关于所请求的资源上没有"Access-Control-Allow-Origin"标头.与github网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
No 'Access-Control-Allow-Origin' header is present on the requested resource
