为什么此 JavaScript 代码仅在我在 HTTP 服务器上运行时才有效？答案

【问题标题】：Why does this JavaScript code only work when I run it on a HTTP server?为什么此 JavaScript 代码仅在我在 HTTP 服务器上运行时才有效？
【发布时间】：2016-03-14 17:59:43
【问题描述】：

我正在尝试构建一个使用 Google 日历 API 的 Chrome 扩展程序。我试图避免设置服务器只是为了对 Google 日历进行 API 调用。我尝试按照此处的示例进行操作：

https://developers.google.com/google-apps/calendar/quickstart/js#step_2_set_up_the_sample

但该代码要求我运行 HTTP 服务器。为什么该代码仅在我在 HTTP 服务器上运行时才有效？据我所知，它只有 JavaScript 和 HTML，当我在浏览器上本地运行它时应该可以工作（使用 file:// 协议）。我也没有看到任何 CORS 问题。

我可能只是设置了一个 Heroku 服务器，但我试图理解为什么这个看似客户端的代码需要一个服务器才能运行！

【问题讨论】：

可能是因为file:// origins 被禁止在浏览器 Javascript 中做一些事情，所以他们只希望你从“真实”的 Web 服务器加载 HTML 页面。刚从文件系统直接加载的时候试过吗？它是否有效或您遇到了什么错误？我还在第 1 步中看到了一些关于 Authorized JavaScript origins 的内容，这意味着您的网页也可能需要真正的来源。
可能它在某处执行 http（例如 ajax）请求，而从 file:/// url 加载的代码不能执行 ajax。
file:// 协议在 javascript 中不受禁止，这取决于浏览器。是的，出于安全原因，当您尝试从本地文件中点击 google api/一些 https 请求时，chrome 确实会阻止。虽然我见过他们中的一些人在 FF 工作。
@MarcB 允许来自 file:// 的某些 HTTP 请求。我知道这一点是因为我能够在 firefox 开发人员控制台中看到 script.js 文件正在使用 GET 请求检索 google 的服务器。
@JanacMeena：是的，但这只是<script src=... 的事情。即使是基于 file:/// 的 html 页面也会使用 <img src=... 加载外部图像。但是您不能从该文件：/// 加载页面执行 ajax 请求。那将是违反同源的

标签： javascript api http server google-calendar-api

【解决方案1】：

出于安全原因，某些浏览器会阻止从 file:// URL 加载的网页中的 Javascript 执行某些操作，例如进行 ajax 调用。

因此，由于此代码最终会向日历服务器发出一些 Ajax 调用，因此该代码可能希望确保您的网页不受这些安全限制的限制，因此它建议了一种可以加载网页的方式来自本地 Web 服务器，而不是文件系统，因此它不会对加载有 file:// URL 的页面施加任何限制。

值得一提的是，应用于file:// URL 的安全限制是特定于浏览器的（每个浏览器都会自行选择要限制的内容）。 Chrome 在这方面似乎相当严格（尽管我认为有一个命令行参数可以放宽其中的一些限制）。

【讨论】：

嗯，有道理 - 创建应用程序时，我必须在 Google Developer Console 中设置我想要允许的 JavaScript 来源。我这里只设置了 localhost，所以只有 file:// url 不起作用才有意义。我想我应该搜索一下为什么从您的文件系统加载 js 文件比运行简单的 Web 服务器并运行相同的 javascript 文件更危险。