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从命令提示符下运行，并将文件移至本地文件系统，但是仍然出现相同的错误。

我感谢任何建议！

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

这是我使用的一些选项。

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

在Firefox上测试，部署到主机

1. Firefox当前允许通过硬盘驱动器提供的文件进行跨源请求
2. 您的网站托管网站将允许请求清单文件配置的文件夹中的文件

运行本地服务器

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

使用Python运行本地服务器

获取您的IP地址：

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

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

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

• 如果您需要回到C：\ Root目录-输入cd /
• 键入cd Drive：\ Folder \ Folder \ etc转到您的.html文件所在的文件夹（或php等）
• 检查路径。在命令提示符处键入：path。您必须看到python所在文件夹的路径。例如，如果python在C：\ Python27中，则必须在列出的路径中看到该地址。
• 如果Python目录的路径不在该路径中，则必须设置路径。输入：帮助路径，然后按Enter。您将看到有关路径的帮助。
• 输入类似的内容：path c：\ python27％path％
• ％path％保留所有当前路径。您不想清除所有当前路径，只需添加新路径即可。
• 从要提供文件的文件夹中创建新路径。
• 启动Python服务器：输入：python -m SimpleHTTPServer port其中“端口”是您想要的端口号，例如python -m SimpleHTTPServer 1337
• 如果将端口留空，则默认为端口8000
• 如果Python服务器成功启动，您将看到一条消息。

在本地运行Web应用程序

• 开启浏览器
• 在地址行中输入： http://your IP address:port
• http://xxx.xxx.x.x:1337 或http://xx.xxx.xxx.xx:8000默认
• 如果服务器正在运行，您将在浏览器中看到文件列表。
• 点击您要提供的文件，它会显示出来。

更先进的解决方案

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

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

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

简单的解决方案

如果您使用的是纯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：安装浏览器同步gulp插件。在存在gulpfile.js的同一目录中，运行以下命令

npm install browser-sync gulp --save-dev

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

gulp serve

发生此错误是因为您只是直接从浏览器中打开html文档。要解决此问题，您需要从网络服务器提供代码并在localhost上访问它。如果您有Apache设置，请使用它来提供文件。一些IDE已内置Web服务器，例如JetBrains IDE，Eclipse ...

如果您已安装Node.Js，则可以使用http-server。只需运行npm install http-server -g，您就可以在Kirill Fuchs这样的终端中使用它http-server C:\location\to\app.

要在此处添加到Alan Wells的详尽答案中，是一个快速解决方案

运行本地服务器

您可以使用Serve服务计算机中的任何文件夹

首先，使用命令行导航到您要提供的文件夹中。

然后

npx i -g serve
serve

或者如果您想通过下载来测试服务

npx serve

就是这样！您可以在http：// localhost：5000上查看文件

我在本地部署Web API项目时遇到此错误，而我仅使用下面给出的URL调用API项目：

本地主机// myAPIProject

由于错误消息说它不是http：//，所以我更改了URL并按如下所示放置了前缀http，错误消失了。

http：// localhost // myAPIProject

如果使用WebStorm Javascript IDE，则只需在浏览器中从WebStorm打开项目。WebStorm将自动启动服务器，并且您再也不会收到任何这些错误，因为您现在正在使用允许/支持的协议（HTTP）访问文件。

根据您的需求，但是还有一种快速的方法，可以通过将JSON保存在http://myjson.com上来临时检查（虚拟）JSON 。复制api链接并将其粘贴到您的javascript代码中。中提琴！当您要部署代码时，一定不要忘记在代码中更改该URL！

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