XMLHttpRequest 无法加载文件。只有 HTTP 支持跨源请求

我得到了以下错误:

XMLHttpRequest cannot load file:///C:/Users/richa.agiwal/Desktop/get/rm_Library/templates/template_viewSettings.html. Cross origin requests are only supported for HTTP.

我意识到这个问题以前已经被回答过了，但是我仍然没有找到解决问题的办法。我尝试从命令提示符运行 chrome.exe --allow-file-access-from-files，并将文件移动到本地文件系统，但仍然得到相同的错误。

谢谢你的建议！

339956 次浏览
小开
最佳答案

如果您在个人计算机上的代码编辑器中编写 HTML 和 Javascript，并在浏览器中测试输出，那么您可能会收到关于 Cross Origin Requests的错误消息。您的浏览器将呈现 HTML 并在您的浏览器中运行 Javascript、 jQuery 和 angularJs，而不需要设置服务器。但是许多网络浏览器被编程来监视跨站点的攻击，并且会阻止请求。你不希望任何人都可以从你的浏览器中读取你的硬盘驱动器。你可以使用 Notepad + + 来创建一个功能齐全的网页，这个网页可以运行 Javascript 和 jQuery、 angularJs 之类的框架; 你还可以使用 Notepad + + 菜单项 RUN, LAUNCH IN FIREFOX来测试所有的东西。这是一个很好的，简单的方法来开始创建一个网页，但是当你开始创建除了布局，css 和简单的页面导航之外的任何东西时，你需要在你的机器上设置一个本地服务器。

下面是我使用的一些选项。

  1. 在 Firefox 上本地测试你的网页，然后部署到你的主机上。
  2. 或: 运行本地服务器

Test on Firefox, Deploy to Host

  1. Firefox currently allows Cross Origin Requests from files served from your hard drive
  2. 您的网站托管站点将允许请求到由清单文件配置的文件夹中的文件

运行本地服务器

  • 在计算机上运行服务器，如 Apache 或 Python
  • Python isn't a server, but it will run a simple server

使用 Python 运行本地服务器

获取你的 IP 地址:

  • 在 Windows 上: 打开“命令提示符”。所有程序，附件，命令提示符
  • 我总是运行 Command Prompt作为 Administrator。右键单击 Command Prompt菜单项，并寻找 Run As Administrator
  • 键入命令: ipconfig并按 Enter。
  • 查找: IPv4地址... 12.123.123.00
  • 有些网站也会显示你的 IP 地址

如果您没有 Python，请下载并安装它。

使用「命令提示符」 ，您必须进入您要作为网页的文件所在的文件夹。

  • 如果您需要返回到 C: Root 目录类型的 cd/
  • 键入 cd Drive: 文件夹文件夹等，以访问.Html 文件所在的文件夹(或 php 等)
  • 检查路径。在命令提示符下键入: path。您必须看到 python 所在文件夹的路径。例如，如果 python 在 C: Python27中，那么您必须在列出的路径中看到该地址。
  • 如果 Python 目录的路径不在路径中，则必须设置路径。Type: help path 并按回车键。你会看到帮助的道路。
  • 键入类似于: path c: python27% path% 的内容
  • %path% keeps all your current paths. You don't want to wipe out all your current paths, just add a new path.
  • 从要为文件提供服务的文件夹创建新路径。
  • Start the Python Server: Type: python -m SimpleHTTPServer port Where 'port' is the number of the port you want, for example python -m SimpleHTTPServer 1337
  • 如果保持端口为空，则默认端口为8000
  • If the Python server starts successfully, you will see a msg.

本地运行 Web 应用程序

  • 打开浏览器
  • 在地址行中输入: http://your IP address:port
  • 默认值为 http://xxx.xxx.x.x:1337或 http://xx.xxx.xxx.xx:8000
  • 如果服务器正常工作，您将在浏览器中看到文件列表
  • 单击要服务的文件，应该会显示该文件。

更先进的解决方案

  • 安装代码编辑器、 Web 服务器和其他集成的服务。

你可以在你的机器上分别安装 Apache，PHP，Python，SQL，Debuggers 等等，然后花费大量的时间试图弄清楚如何让它们一起工作，或者寻找一个将所有这些东西结合起来的解决方案。

我喜欢在 NetBeans IDE 中使用 XAMPP。您还可以安装 WAMP，它提供了一个用于管理和集成 Apache 和其他服务的 User Interface。

小开

简单解决方案

如果使用纯 html/js/css 文件。

在 chrome 中安装这个小型服务器(链接)应用程序。打开应用程序并将文件位置指向项目目录。

Goto the url shown in the app.

Edit: Smarter solution using Gulp

步骤1: 安装 Gulp。在终端中运行以下命令。

npm install gulp-cli -g
npm install gulp -D

步骤2: 在你的项目目录中创建一个名为 Gulpfile.js 的文件。

var gulp        = require('gulp');
var bs          = require('browser-sync').create();


gulp.task('serve', [], () => {
bs.init({
server: {
baseDir: "./",
},
port: 5000,
reloadOnRestart: true,
browser: "google chrome"
});
gulp.watch('./**/*', ['', bs.reload]);
});

步骤3: 安装浏览器同步 Gulp 插件

npm install browser-sync gulp --save-dev

步骤4: 启动服务器

gulp serve
小开

如果您使用 WebStorm Javascript IDE，您可以只在浏览器中从 WebStorm 打开您的项目。WebStorm 将自动启动一个服务器，您不会再出现这些错误，因为您现在正在使用允许/支持的协议(HTTP)访问这些文件。

小开

发生此错误是因为您正在从浏览器直接打开 html 文档。为了解决这个问题，你需要从一个网络服务器上提供你的代码，并在本地主机上访问它。如果您有 Apache 安装程序，请使用它为您的文件提供服务。一些 IDE 已经内置了网络服务器，比如 JetBrains IDE，Eclipse..。

如果设置了 Node.Js，那么可以使用 http-server。只要运行 npm install http-server -g，您将能够在终端使用它，如 http-server C:\location\to\app. Kirill Fuchs

小开

当我在本地部署我的 Web API 项目时，我正面临着这个错误，而且我只使用下面给出的 URL 调用 API 项目:

Localhost//myAPI 项目

因为错误消息说它不是 http://，所以我修改了 URL，并按照下面给出的前缀 http，错误就消失了。

Http://localhost//myapiproject

小开

这取决于您的需要，但是也有一种快速的方法可以通过在 http://myjson.com上保存 JSON 来临时检查您的(虚拟的) JSON。复制 api 链接并将其粘贴到 javascript 代码中。维奥拉！当您要部署代码时，一定不要忘记更改代码中的 URL！

小开

为了补充 艾伦 · 威尔斯精心设计的答案，这里有一个快速解决方案

Run a Local Server

you can serve 任何 folder in your computer with 发球

首先，使用命令行导航到要服务的文件夹中。

然后

npx i -g serve
serve

or if you'd like to test Serve without downloading it

npx serve

就是这样! 你可以在 http://localhost:5000查看你的文件

enter image description here

小开

如果您正在使用 vscode，则可以轻松地启动一个 liver 服务器。单击页面底部的 liver server，一旦服务器启动，vscode 将告诉端口项目正在运行。确保您的项目文件夹是工作区image showing liver server on vscode.


提交答案