cari
Rumahhujung hadapan webtutorial js配置Chrome支持本地(file协议)的AJAX请求(图文教程)

这篇文章主要为大家详细介绍了配置Chrome支持本地(file协议)的AJAX请求 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

什么问题 

WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是:

 •新建文件夹
 •新建需要的文件
 •在Sublime(或其他编辑器)中完成DEMO的编码
 •双击HTML文件,直接在浏览器中运行演示 

如果此时Demo中有AJAX操作,浏览器就会报一个错: 

XMLHttpRequest cannot load file:///Users/iceStone/Documents/Learning/angular/demo/angular-moviecat/movie/view.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 

原因很简单,浏览器(Webkit内核)的安全策略决定了file协议访问的应用无法使用XMLHttpRequest对象,错误消息中也很清楚的说明了:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. 

跨域请求仅支持协议:http, data, chrome, chrome-extension, https, chrome-extension-resource 

在某些浏览器中是允许这种操作的,比如Firefox浏览器,也就是说Filefox支持file协议下的AJAX请求。 

解决办法 

作为我个人最喜欢的Chrome,强大,没什么好说的,只有想不到,几乎没有做不到,所以必须也得支持:

 Windows:

•设置Chrome的快捷方式属性,在“目标”后面加上–allow-file-access-from-files,注意前面有个空格,重新打开Chrome即可。

 Mac:

•只能通过终端打开浏览器:打开终端,输入下面命令:open -a “Google Chrome” –args –disable-web-security然后就可以屏蔽安全访问了[ –args:此参数可有可无] 

补充说明 

长久来看,你肯定是需要通过HTTP的方式访问你的应用,那就需要配置HTTP服务器软件。但是对于一些刚入门的同学,配一个HTTP服务器(比如Apache、IIS等)比较繁琐,望而却步。

 •对于使用IDE的同学没什么好说的,每个用于Web开发的IDE都内置http服务器,不用单独配置。
 •对于喜欢轻量级编辑器的同学,比如Sublime Text,它默认是没有内置HTTP服务器的 

接下来推荐一款Sublime的插件Sublime Server,这个插件可以提供一个静态文件HTTP服务器,具体使用方式如下:

 •安装Package Control(Sublime的插件管理工具),不会安装自行Google
 •Command+Shift+P或Ctrl+Shift+P打开命令面板,输入Package Control: Install Package
 •稍等片刻(此时会连接到插件提供商的服务器,比较慢,有可能背墙),搜索SublimeServer
 •安装完成过后通过Tool → SublimeServer → Start SublimeServer
 •一定要用打开文件夹的方式使用Sublime,否则没有办法正常使用SublimeServer。
 •打开HTML文件,在右键菜单中选择View in SublimeServer,此时就可以以HTTP方式在浏览器中访问该文件了,
 •如果该选项是灰色的,那就说明没有启动SublimeServer,Tool → SublimeServer → Start SublimeServer 

到此为止,你已经可以在Sublime中使用HTTP服务器了。 

可能遇到的问题 

如果Start SublimeServer不能点,可能是当前8080端口被占用了(SublimeServer默认使用8080端口) 

解决方法就是打开配置文件将端口修改为其他端口:

以下是我的配置: 

{
  "attempts": 5,
  "autorun": false, // 是否在启动Sublime时自动启动SublimeServer
  "defaultExtension": ".html",
  "interval": 500,
  "mimetypes":
  {
    "": "application/octet-stream",
    ".c": "text/plain",
    ".h": "text/plain",
    ".py": "text/plain"
  },
  "port": 2016 // 端口号
}

当然其他编辑器也有类似的插件。 

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

AJAX分页效果简单实现(图文教程)

使用Ajax或Easyui等框架时的Json-lib的处理方案(图文教程)

Ajax实现列表无限加载和二级下拉选项效果

Atas ialah kandungan terperinci 配置Chrome支持本地(file协议)的AJAX请求(图文教程). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
什么是Updater.exe在Windows 11/10中?这是Chrome进程吗?什么是Updater.exe在Windows 11/10中?这是Chrome进程吗?Mar 21, 2024 pm 05:36 PM

你在Windows上运行的每个应用程序都有一个组件程序来更新它。因此,如果你使用的是谷歌Chrome或谷歌地球,它会运行一个GoogleUpdate.exe应用程序,检查是否有更新可用,然后根据设置进行更新。然而,如果您不再看到它,而是在Windows11/10的任务管理器中看到一个进程updater.exe,这是有原因的。什么是Updater.exe在Windows11/10中?谷歌已经为其所有应用程序推出了更新,如GoogleEarth、GoogleDrive、Chrome等。这次更新带来了

crdownload是什么文件crdownload是什么文件Mar 08, 2023 am 11:38 AM

crdownload是chrome浏览器下载缓存文件,就是没下载完的文件;crdownload文件是一种临时文件格式,用于储存从硬盘上下载的文件,它能够帮助用户在下载文件时保护文件完整性,避免受到意外中断或停止的情况。CRDownload文件也可以用于备份文件,它可以让用户保存文件的临时副本;如果在下载时出现意外错误,就可以使用CRDownload文件来恢复已下载的文件。

chrome无法加载插件怎么办chrome无法加载插件怎么办Nov 06, 2023 pm 02:22 PM

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。其解决方法如下:1、检查插件是否已正确安装,重新安装即可;2、禁用和启用插件,点击禁用按钮,然后再次点击启用按钮即可;3、清除插件缓存,选择高级选项>清除浏览数据,勾选缓存图片和文件和清除所有Cookies,点击清除数据即可。

php blob怎么转filephp blob怎么转fileMar 16, 2023 am 10:47 AM

php blob转file的方法:1、创建一个php示例文件;2、通过“function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })}”方法实现Blob转File即可。

解决谷歌浏览器无法打开网页的方法解决谷歌浏览器无法打开网页的方法Jan 04, 2024 pm 10:18 PM

谷歌浏览器网页打不开怎么办?有很多小伙伴都喜欢上使用谷歌浏览器,当然也有部分小伙伴在使用的过程中发现自己无法正常的打开网页或者说网页打开的速度很慢,那么遇到这种情况要怎么办呢?下面就和小编来看看谷歌浏览器网页打不开的解决方法吧。谷歌浏览器网页打不开的解决方法方法一为了帮助还没有过关的玩家们,让我们一起来了解一下具体的解谜方法吧。首先,右键点击右下角的网络图标,然后选择“网络和Internet设置”。2、点击"以太网",接着点击"更改适配器选项"。3、点击”属性“按钮。4、双击打开i

Chrome的插件扩展程序安装目录是什么Chrome的插件扩展程序安装目录是什么Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么?正常情况下,Chrome插件扩展程序的默认安装目录如下:1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

chrome是什么意思chrome是什么意思Aug 07, 2023 pm 01:18 PM

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一,其名字来源于浏览器的界面设计,因为它的标志性特征就是窗口顶部的标签栏,而这个标签栏的外观与铬金属非常相似。

如何在Chrome和Edge的所有选项卡中搜索文本如何在Chrome和Edge的所有选项卡中搜索文本Feb 19, 2024 am 11:30 AM

本教程向您展示了如何在Windows的Chrome或Edge中找到所有打开的标签页上的特定文本或短语。有没有办法在Chrome中所有打开的标签页上进行文本搜索?是的,您可以使用Chrome中的免费外部Web扩展在所有打开的标签上执行文本搜索,无需手动切换标签。一些扩展如TabSearch和Ctrl-FPlus可以帮助您轻松实现这一功能。如何在GoogleChrome的所有选项卡中搜索文本?Ctrl-FPlus是一个免费的扩展,它方便用户在浏览器窗口的所有选项卡中搜索特定的单词、短语或文本。这个扩

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual