chrome 等浏览器不支持本地ajax请求,的问题

XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

上述是chrome控制台报错信息,信息的意思很明显,XMLHttpRequest 不能加载那个html文件,在本地是禁止跨域请求的,不支持file://协议,其实,这是我直接双击index.html文件后的结果,其实,我在自己电脑上安装了phpstudy套件,我通过http://127.0.0.1/......./index.html是可以正常打开页面的,且不会报错,这是当然的,如上述报错信息后半句,跨域请求支持的协议有http嘛!

其实 ,禁止跨域是浏览器的安全限制机制,在每个浏览器下都有,如在chrome、Firefox、opera 、360 都是这样的,同样会报告上述错误,但是可以通过设置来绕过这个限制(如果经常 完前端代码 建议在本机装个web容器。。。),常见的方式是  右击chrome快捷方式,选择“属性”,在“快捷方式”下的“目标”中添加" --allow-file-access-from-files"(最前面有个空格),重启chrome即可。如下图:



还有一种方式,不用在快捷方式上做手脚,就是:

1、cmd进入dos环境

2、dos下进入\Google\Chrome\Application>(chrome.exe所在目录)

3、运行命令 chrome.exe -- allow-file-access-from-files;

注意:运行完第3步之后,这个时候就会启动chrome浏览器,不要关闭它,使用chrome打开那个之前会报错的html文件,发现正常了,不会报错了,可是,我现在把chrome关闭,在使用chrome代码这个html文件还是会报错,这说明,这个方法只对本次打开的chrome有效,关闭再打开就无效了,为了方便,还是使用上面的那个修改快捷方式属性的方法吧!

好的,以下是一个简单的Chrome浏览器插件,用于向指定的API发送Ajax请求并将返回结果显示在浏览器界面中: manifest.json文件: ```json { "name": "Ajax Request Plugin", "version": "1.0", "description": "This plugin sends Ajax requests and displays the response", "manifest_version": 2, "permissions": [ "http://localhost/*", "https://localhost/*", "http://example.com/*", "https://example.com/*", "activeTab" ], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_popup": "popup.html" } } ``` popup.html文件: ```html <!DOCTYPE html> <html> <head> <title>Ajax Request Plugin</title> <script src="popup.js"></script> </head> <body> <h1>Ajax Request Plugin</h1> <form> <label for="url">URL:</label> <input type="text" id="url" name="url" /><br /> <label for="method">Method:</label> <select id="method" name="method"> <option value="GET">GET</option> <option value="POST">POST</option> </select><br /> <label for="data">Data:</label> <textarea id="data" name="data"></textarea><br /> <input type="button" id="send" value="Send" /> </form> <div id="response"></div> </body> </html> ``` popup.js文件: ```javascript document.addEventListener("DOMContentLoaded", function() { var sendButton = document.getElementById("send"); var responseDiv = document.getElementById("response"); sendButton.addEventListener("click", function() { var url = document.getElementById("url").value; var method = document.getElementById("method").value; var data = document.getElementById("data").value; var xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { responseDiv.innerHTML = xhr.responseText; } }; xhr.send(data); }); }); ``` 以上代码中,popup.html是浏览器插件的界面,包含了一个表单用于输入请求的URL、请求方法、请求数据以及一个发送按钮。当用户点击发送按钮时,会触发popup.js中的事件处理函数,创建一个XMLHttpRequest对象,使用指定的URL、方法和数据发送Ajax请求,并将返回结果显示在responseDiv元素中。需要注意的是,插件需要在manifest.json文件中声明所需的权限,否则会限制插件的功能和使用范围。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值