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从命令提示符chrome.exe --allow-file-access-from-files ,并将文件移动到本地文件系统,但我仍然得到相同的错误。

我感谢任何建议!

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

这里有一些我使用的选项。

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

在Firefox上测试,部署到主机

  1. Firefox目前允许来自您的硬盘驱动器的文件的跨源请求
  2. 您的网站托管网站将允许请求清单文件配置的文件夹中的文件

运行本地服务器

  • 在计算机上运行服务器,如Apache或Python
  • Python不是一个服务器,但它会运行一个简单的服务器

用Python运行本地服务器

获取您的IP地址:

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

如果你没有Python,请下载并安装它。

使用“命令提示符”,您必须转到您想要用作网页的文件所在的文件夹。

  • 如果您需要返回到C:\ Root目录,请键入cd /
  • 键入CD驱动器:\文件夹\文件夹\等到您的.Html文件是(或PHP等)的文件夹
  • 检查路径。 在命令提示符下键入:path。 您必须看到python所在文件夹的路径。 例如,如果python在C:\ Python27中,那么你必须在列出的路径中看到这个地址。
  • 如果Python目录的路径不在路径中,则必须设置路径。 键入:help path并按Enter键。 你会看到路径的帮助。
  • 键入如下所示:path c:\ python27%path%
  • %path%保留所有当前路径。 您不想清除所有当前的路径,只需添加一个新的路径。
  • 从要提供文件的文件夹中创建新路径。
  • 启动Python服务器:输入: python -m SimpleHTTPServer port其中'port'是你想要的端口号,例如python -m SimpleHTTPServer 1337
  • 如果您将该端口留空,则默认为端口8000
  • 如果Python服务器启动成功,你会看到一个味精。

在本地运行您的Web应用程序

  • 打开浏览器
  • 在地址行中键入: http://your IP address:port
  • http://xxx.xxx.xx:1337http://xx.xxx.xxx.xx:8000作为默认值
  • 如果服务器正在运行,您将在浏览器中看到您的文件列表
  • 点击你想要的文件,它应该显示。

更高级的解决方案

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

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

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

简单的方案

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

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

转到应用程序中显示的网址。

编辑:使用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步:安装浏览器同步插件。 在存在gulpfile.js的同一目录中,运行以下命令

 npm install browser-sync gulp --save-dev 

第4步:启动服务器。 在存在gulpfile.js的同一目录中,运行以下命令

 gulp serve 

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

如果你有Node.Js设置,那么你可以使用http-server 。 只要运行npm install http-server -g ,你就可以在终端上使用它,例如http-server C:\location\to\app. 基里尔·福克斯

我在本地部署了我的Web API项目时遇到了这个错误,而我只是使用下面给出的URL调用API项目:

本地主机// myAPIProject

由于错误消息说,它不是http://然后我改变了网址,并把下面给出的前缀http,错误消失了。

HTTP://本地主机// myAPIProject

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

取决于您的需求,但也有一种快速的方法来通过在http://myjson.com上保存您的JSON来临时检查您的(虚拟)JSON。 复制api链接并将其粘贴到您的JavaScript代码中。 中提琴! 当你想部署的代码,你不能忘记改变你的代码中的网址!

我正面临同样的问题,当我将浏览器从Chrome浏览器更改为Firefox时,它开始工作。 请尝试在不同的浏览器,并希望这有助于

将您的项目文件夹放入Xampp目录的htdocs使用xampp控制面板启动Apache服务器,然后打开浏览器转到localhost / projectfolder,然后开始工作