最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

[已解决]Mac中Chrome运行js出错:XMLHttpRequest cannot load

chrome crifan 2092浏览 0评论

代码:

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 file~~~~~~~Origin ‘null’ is therefore not allowed access – 朱丹—路漫漫其修远兮,吾将上下而求索 – 博客频道 – CSDN.NET

XMLHttpRequest cannot load 跨域问题解决 – 运维生存时间

json – XMLHttpRequest cannot load an URL with jQuery – Stack Overflow

javascript – Error in Chrome only: XMLHttpRequest cannot load file URL No ‘Access-Control-Allow-Origin’ header is present on the requested resource – Stack Overflow

错误:XMLHttpRequest cannot load file – 飞翔的天空 – 51CTO技术博客

结果:

header("access-control-allow-origin: *");

加到script中或者html中,都不行。

搜:

html access-control-allow-origin

cross domain – How do I use Access-Control-Allow-Origin? Does it just go in between the html head tags? – Stack Overflow

试试:

<!DOCTYPE html>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
<html>

结果:

还是不行。

HTTP访问控制(CORS) – HTTP | MDN

然后去试了试Safari浏览器,是可以执行此处的代码的:

enable cross-origin resource sharing

自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题

Using CORS – HTML5 Rocks

试试:

  //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”

jquery – XMLHttpRequest Origin null is not allowed Access-Control-Allow-Origin for file:/// to file:/// (Serverless) – Stack Overflow

javascript – XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin – Stack Overflow

List of Chromium Command Line Switches « Peter Beverloo

enable cross-origin resource sharing

Download jQuery | jQuery

去试试:

用第三方的办法,比如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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
59 queries in 0.096 seconds, using 18.66MB memory