代码:
function getUrlRespHtml_async(url, callback){ var xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) callback(xmlHttp.responseText); } xmlHttp.open("GET", url, true); xmlHttp.send(null); } function gotStHtml(respHtml){ alert(respHtml); } var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { /* Loving You Allexinno Mirabela 试听 — SongTaste 用音乐倾听彼此 http://www.songtaste.com/song/3498546/ */ var stUrl = "http://www.songtaste.com/song/3498546/"; getUrlRespHtml_async(stUrl, gotStHtml); |
出错:
XMLHttpRequest cannot load http://www.songtaste.com/song/3498546/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
如图:
XMLHttpRequest cannot load 跨域问题解决 – 运维生存时间
json – XMLHttpRequest cannot load an URL with jQuery – Stack Overflow
错误:XMLHttpRequest cannot load file – 飞翔的天空 – 51CTO技术博客
结果:
header("access-control-allow-origin: *");
加到script中或者html中,都不行。
搜:
html access-control-allow-origin
试试:
<!DOCTYPE html> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <html> |
结果:
还是不行。
然后去试了试Safari浏览器,是可以执行此处的代码的:
enable cross-origin resource sharing
自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题
试试:
//xmlHttp.send(null); xmlHttp.send(); |
结果:
还是不行。
搜:
chrome Origin null is therefore not allowed access
jquery – Origin null is not allowed by Access-Control-Allow-Origin – Stack Overflow
jquery ajax 访问本地地址问题 – cychai的专栏 – 博客频道 – CSDN.NET
"Origin null is not allowed by Access-Control-Allow-Origin" 错误 – CNode技术社区
Allow Local File Access in Chrome (Windows) – Chris Bitting
Origin null is not allowed by Access-Control-Allow-Origin – Mete Atamel
“open /Applications/Google\ Chrome.app –args –allow-file-access-from-files”
List of Chromium Command Line Switches « Peter Beverloo
enable cross-origin resource sharing
去试试:
用第三方的办法,比如Jquery的JSONP:
jQuery.ajax() | jQuery API Documentation
jQuery.getJSON() | jQuery API Documentation
去用Jquery的ajax:
function getUrlRespHtml_async(url, callback){ // var xmlHttp = new XMLHttpRequest(); // xmlHttp.onreadystatechange = function() { // if (xmlHttp.readyState == 4 && xmlHttp.status == 200) // callback(xmlHttp.responseText); // } // xmlHttp.open("GET", url, true); // // xmlHttp.send(); // xmlHttp.send(null); $.ajax({ type: "GET", url: url, dataType: "jsonp", }).done(function ( data ) { callback(data); // console.log("get html done"); //alert(data); // alert("Got html ok"); }); } function gotStHtml(respHtml){ // alert(respHtml); console.log(respHtml); } /* Loving You Allexinno Mirabela 试听 — SongTaste 用音乐倾听彼此 http://www.songtaste.com/song/3498546/ */ var stUrl = "http://www.songtaste.com/song/3498546/"; // var stUrl = "http://www.baidu.com"; getUrlRespHtml_async(stUrl, gotStHtml); |
结果出错:
然后自己研究了半天才知道:
原理是:
ajax或者jsonp时,要返回的是json数据格式,此处的返回的是普通的html,当作json去解析当然会出错。
所以还是换回用XMLHttpRequest,至少Safari可以正常运行。
试了试:
$.get(url, function(json) { alert(json); }); |
还是会出现同样的跨域的问题。
[无需解决]Mac中给LaunchPad中的Chrome程序图标中加入启动参数
Allow-Control-Allow-Origin: * – Chrome 网上应用店
然后代码终于可以正常运行了:
[总结]
此处错误是由于Chrome浏览器,不允许跨域访问导致的
解决办法是:
要么是Mac中启动Chrome时,加上参数:–disable-web-security
(参数说明:
–disable-web-security
Don’t enforce the same-origin policy. (Used by people testing their sites.) )
要么是:换用Safari(或Firefox等)浏览器以规避此问题
但是在Mac中,需要用命令行启动chrome,才能加上需要的参数,不能图形界面中操作,很是麻烦。
而此处,巧了,找到了Chrome有个插件,是帮我们解决此处的问题的:
Allow-Control-Allow-Origin: * – Chrome 网上应用店
“Allows to you request any site with ajax from any source. Adds to response ‘Allow-Control-Allow-Origin: *’ header”
所以通过安装此Chrome插件,解决了此处的问题,而无需每次都用命令行加参数的方式启动Chrome了。
(如果是访问本地文件出现此错误,则是:–allow-file-access-from-files
By default, file:// URIs cannot read other file:// URIs. This is an override for developers who need the old behavior for testing. )
转载请注明:在路上 » [已解决]Mac中Chrome运行js出错:XMLHttpRequest cannot load