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目前允许从您的硬盘驱动器提供的文件中提供Cross Origin Requests
2. 您的Web托管站点将允许对清单文件配置的文件夹中的文件进行请求

运行本地服务器

• 在您的计算机上运行服务器,如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等)
• 检查路径.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中安装此小型服务器(链接)应用程序.打开应用程序并将文件位置指向项目目录.

转到应用中显示的网址.

编辑:使用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

添加到Alan Wells的详细答案这里是一个快速修复

运行本地服务器

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

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

然后

npx i -g serve
serve

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

npx serve

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