老师.报错~~~
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="banner" id="banner"></div>
<script type="text/javascript">
//封装通用的xhr对象,兼容各个版本
function createXHR(){
//判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,firefox,opera等
if(typeof XMLHttpRequest!='underfined'){
return new XMLHttpRequest();
}else if(typeof ActiveXObject!='underfined'){
//将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
//遍历创建XMLHttpRequest对象
var len=xhrArr.length;
for(var i=0;i<len;i++){
try{
//创建XMLHttpRequest对象
xhr=new ActiveXObject(xhrArr[i]);
break;
}
catch(ex){
}
}
return xhr;
}else{
throw new Error('No XHR object availabel.')
}
}
//XMLHttpRequest对象
var xhr=createXHR(),data=null;
//响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readystatechange属性发生改变时触发
xhr.onreadystatechange=function(){
//异步调用成功,响应内容解析完成,可以在客户端调用
if(xhr.readyState===4){
if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
//获得服务器返回的数据
data=JSON.parse(xhr.responseText);
//渲染数据到页面中
renderDataToDom();
}
}
}
// console.log(xhr);
//创建请求
xhr.open("get","./server/slider.json",true);
//发送请求
// xhr.send({user:"zhangsan",id:6});
xhr.send(null);
//设置http头部信息
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//渲染数据
function renderDataToDom(){
var img=data.slider,i,
len=img.length,str="",
banner=document.getElementById("banner");
for(i=0;i<len;i++){
// console.log(img[i]);
// var a=document.createElement("a");
// a.innerHTML='<img src=';
// banner.appendChild(a);
str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
}
banner.innerHTML=str;
}
</script>
</body>
</html>*{
margin:0;
padding:0;
}
.banner{
width: 600px;
height: 338px;
overflow: hidden;
position: relative;
margin:50px auto;
}
.banner a{
display:block;
float:left;
width:600px;
height:338px;
}
.banner a img{
display: block;
width: 600px;
height:338px;
}6
收起
正在回答
2回答
根据报错信息，同学是在本地访问的，本地访问是不能进行跨域的，需要部署到静态服务器上，比如使用wampserver软件或者是按照如下操作直接部署到静态服务器上也是可以的：
1、在node.js官网下载node.js并进行安装
2、在电脑桌面上按下windows键+R键，在如下弹出窗口中输入cmd，回车
在弹出的命令窗口中，按如下步骤操作：
（1）npm install http-server -g
等待安装完成
（2）安装完成后，找到你这个项目的文件夹，按住shift不松手，右键选择在此处打开命令窗口，即可在项目文件夹中打开命令窗口，然后输入http-server即可运行项目，这个时候即可正常访问
示例：
希望可以帮到你！
慕言_7946275
2019-09-16 18:09:03
报错 Failed to load file:///D:/360Downloads/wamp-server/wamp/www/ajax/server/slider.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星