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上运行＜code＞。exe--允许从命令提示符下的文件访问文件，并将文件移动到本地文件系统，但我仍然收到相同的错误。

我感谢任何建议！

Answer 1

除了艾伦·威尔斯精心设计的答案之外，这里还有一个快速解决方案

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

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

然后

npx i -g serve
serve

或者，如果您想在不下载的情况下测试服务

npx serve

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

Answer 2

简单解决方案

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

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

转到应用程序中显示的url。

编辑：使用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]);
});

第三步:安装浏览器同步插件。在gulpfile.js所在的目录中，运行以下命令

npm install browser-sync gulp --save-dev

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

gulp serve

Answer 3

如果您正在个人计算机上的代码编辑器中编写HTML和Javascript，并在浏览器中测试输出，则可能会收到有关跨源请求的错误消息。您的浏览器将呈现HTML并在浏览器中运行Javascript，jQuery，angularJs，而无需设置服务器。但是许多Web浏览器被编程为监视跨站点攻击，并将阻止请求。您不希望任何人都能够从您的Web浏览器中读取您的硬盘驱动器。您可以使用将运行Javascript的记事本以及jQuery和angularJ等框架创建一个功能齐全的网页;并仅使用记事本菜单项“运行”，“在FIREFOX中启动”来测试所有内容。这是开始创建网页的一种很好，简单的方法，但是当您开始创建布局，css和简单页面导航以外的任何内容时，您需要在计算机上设置本地服务器。

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

< li>Firefox目前允许来自硬盘上的文件的跨来源请求 < li >您的web宿主站点将允许对清单文件配置的文件夹中的文件的请求

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

获取您的IP地址:

• 在Windows上：打开“命令提示符”。所有程序、附件、命令提示符
• 我总是将命令提示符作为管理员运行。右键单击命令提示符菜单项并查找以管理员身份运行
• 输入命令：ipconfig并点击Enter。
• 寻找：IPv4地址 . . . . . . . . 12.123.123.00
• 有些网站也会显示您的IP地址

如果你没有Python，下载安装。

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

< li >如果您需要返回到C:\根目录-请键入cd/ < li >键入cd Drive:\Folder\Folder\etc以获得您的。Html文件是(或php等) < li >检查路径。在命令提示符下键入:path。您必须看到python所在文件夹的路径。例如，如果python在C:\Python27中，那么您必须在列出的路径中看到该地址。 < li >如果Python目录的路径不在路径中，您必须设置路径。键入:help path并按Enter键。您将看到路径的帮助。 < li >键入如下内容:path c:\python27 %path% < li>%path%保留所有当前路径。你不想清除所有当前路径，只需添加一个新路径。 < li >从您想要保存文件的文件夹创建新路径。 < li >启动Python服务器:键入:< code > Python-m simple http Server port ，其中“port”是您想要的端口号，例如< code > Python-m simple http Server 1337 < li >如果您将端口留空，它默认为端口8000 < li >如果Python服务器成功启动，您将看到一条消息。

• 打开浏览器
• 在地址行类型：http://your IP 地址：端口
• 默认值的 http://xxx.xxx.x.x:1337 或 http://xx.xxx.xxx.xx:8000
• 如果服务器正在运行，您将在浏览器中看到文件列表
• 单击要提供的文件，该文件应会显示出来。

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

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

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