XMLHttpRequest无法加载文件。仅支持HTTP的跨源请求

Question

我收到以下错误：

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，并将文件移动到本地文件系统，但我仍然得到相同的错误。

我感谢任何建议！

Answer 1

如果您在个人计算机上的代码编辑器中编写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 Prompt作为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等）
• 检查路径。 type：命令提示符下的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.x.x:1337或http://xx.xxx.xxx.xx:8000作为默认
• 如果服务器正常运行，您将在浏览器中看到文件列表
• 单击要提供的文件，该文件应显示。

更高级的解决方案

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

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

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

Answer 2

简单解决方案

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

在Chrome中安装此小型服务器（link）应用。打开应用程序并将文件位置指向项目目录。

转到应用中显示的网址。

编辑：使用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步：安装browser sync gulp插件。在存在gulpfile.js的同一目录中，运行以下命令

npm install browser-sync gulp --save-dev

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

gulp serve

Answer 3

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

如果您有Node.Js设置，那么您可以使用http-server。只需运行npm install http-server -g，您就可以在http-server C:\location\to\app.等终端中使用它 Kirill Fuchs

Answer 4

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

本地主机// myAPIProject

由于错误消息显示它不是http：//然后我更改了URL，并在下面给出了前缀http，错误消失了。

http://localhost//myAPIProject

Answer 5

如果您使用WebStorm Javascript IDE，则只需在浏览器中通过WebStorm打开项目即可。 WebStorm将自动启动服务器，您将不再获得任何这些错误，因为您现在使用允许/支持的协议（HTTP）访问文件。

Answer 6

取决于您的需求，但也可以通过在http://myjson.com上保存您的JSON来快速检查您的（虚拟）JSON。复制api链接并将其粘贴到您的javascript代码中。中提琴！如果要部署代码，请务必忘记在代码中更改该网址！

Answer 7

要在Alan Wells的详细答案中添加一个快速解决方法

运行本地服务器

您可以使用Serve

为计算机中的任何文件夹提供服务

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

然后

npx i -g serve
serve

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

npx serve

就是这样！您可以在http://localhost:5000

查看文件

Answer 8

如果您使用的是 vscode，您可以轻松启动肝脏服务器。点击页面底部的肝脏服务器，一旦服务器启动，vscode会告诉项目运行的端口。请确保您的项目文件夹是工作区

Answer 9

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