Javascript GCS中的静态网页-html中java脚本中的API调用未响应_Javascript_Api_Google Cloud Platform_Google Cloud Storage

Javascript GCS中的静态网页-html中java脚本中的API调用未响应

javascript api google-cloud-platform google-cloud-storage

Javascript GCS中的静态网页-html中java脚本中的API调用未响应,javascript,api,google-cloud-platform,google-cloud-storage,Javascript,Api,Google Cloud Platform,Google Cloud Storage,我在gcs bucket中有一个静态页面，并尝试调用API。如果我点击gcs bucket中的认证url，我会得到任何响应，即：/sample.html。我做错什么了吗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&q

我在gcs bucket中有一个静态页面，并尝试调用API。如果我点击gcs bucket中的认证url，我会得到任何响应，即：/sample.html。我做错什么了吗

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Info</title>
    <script>
      let request = new XMLHttpRequest();
      request.open("GET", "http://<static_ip>/api/v1/info?id=12345678");
      request.send();
      request.onload = () => {
        console.log(request);
        if (request.status === 200) {
          console.log(JSON.parse(request.response));
        } else {
          console.log(`error ${request.status} ${request.statusText}`);
        }
      };
    </script>
  </head>
  <body></body>
</html>


信息
let request=new XMLHttpRequest（）；
请求。打开（“获取”http:///api/v1/info?id=12345678");
request.send（）；
request.onload=（）=>{
控制台日志（请求）；
如果（request.status==200）{
log（JSON.parse（request.response））；
}否则{
log（`error${request.status}${request.statusText}`）；
}
};

我认为您应该在数据加载之前发送响应。Resquest.open（）和send方法应该位于onload调用之后。

我认为您应该在加载数据之前发送响应。Resquest.open（）和send方法应该在onload调用之后出现。

如果在chrome中转到控制台，您会看到出现以下错误：

混合内容：页面位于 'https://storage.googleapis.com/mymadpbucket/index.html”他说通过HTTPS，但请求了不安全的XMLHttpRequest终结点 'http://%3Cstatic_ip%3E/api/v1/info？id=12345678'。这项请求已被批准被封锁；内容必须通过HTTPS提供

您不能只在https web上提供嵌入式http内容。这是记录在案的，还有更多的问题有待解决

我创建了一个可以从云存储服务的文件示例。在尝试此操作之前，您必须配置bucked的cors。您不会直接在浏览器上看到任何显示，但会在控制台中看到图像内容（按F12）。我使用imgur作为源代码，因为我不知道您试图在该静态ip源上提供什么或如何提供服务，并且因为imgur有广泛的COR用于存储

cors.json
[
{
  "origin": ["*"],
  "method": ["GET", "POST", "PUT", "OPTIONS"],
  "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"],
  "maxAgeSeconds": 100
}
]

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Info</title>
    <script>
      let request = new XMLHttpRequest();
      request.open("GET", "https://i.imgur.com/r97IfAU.jpg");
      //request.setRequestHeader('Access-Control-Allow-Headers', 'https://imgur.com');
      request.send();
      request.onload = () => {
        console.log(request);
        if (request.status === 200) {
          console.log(request.response);
        } else {
          console.log(`error ${request.status} ${request.statusText}`);
        }
      };
    </script>
  </head>
  <body></body>
</html>

cors.json
[
{
“来源”：[“*”]，
“方法”：[“获取”、“发布”、“出售”、“期权”]，
“responseHeader”：[“内容类型”，“访问控制允许来源”]，
“最大秒数”：100
}
]
index.html
信息
let request=new XMLHttpRequest（）；
请求。打开（“获取”https://i.imgur.com/r97IfAU.jpg");
//setRequestHeader（'Access-Control-Allow-Headers'，'https://imgur.com');
request.send（）；
request.onload=（）=>{
控制台日志（请求）；
如果（request.status==200）{
console.log（请求.响应）；
}否则{
log（`error${request.status}${request.statusText}`）；
}
};

如果您使用chrome进入控制台，您会看到出现以下错误：

您不能只在https web上提供嵌入式http内容。这是记录在案的，还有更多的问题有待解决

cors.json
[
{
  "origin": ["*"],
  "method": ["GET", "POST", "PUT", "OPTIONS"],
  "responseHeader": ["Content-Type", "Access-Control-Allow-Origin"],
  "maxAgeSeconds": 100
}
]

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Info</title>
    <script>
      let request = new XMLHttpRequest();
      request.open("GET", "https://i.imgur.com/r97IfAU.jpg");
      //request.setRequestHeader('Access-Control-Allow-Headers', 'https://imgur.com');
      request.send();
      request.onload = () => {
        console.log(request);
        if (request.status === 200) {
          console.log(request.response);
        } else {
          console.log(`error ${request.status} ${request.statusText}`);
        }
      };
    </script>
  </head>
  <body></body>
</html>

cors.json
[
{
“来源”：[“*”]，
“方法”：[“获取”、“发布”、“出售”、“期权”]，
“responseHeader”：[“内容类型”，“访问控制允许来源”]，
“最大秒数”：100
}
]
index.html
信息
let request=new XMLHttpRequest（）；
请求。打开（“获取”https://i.imgur.com/r97IfAU.jpg");
//setRequestHeader（'Access-Control-Allow-Headers'，'https://imgur.com');
request.send（）；
request.onload=（）=>{
控制台日志（请求）；
如果（request.status==200）{
console.log（请求.响应）；
}否则{
log（`error${request.status}${request.statusText}`）；
}
};