跨源请求错误

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="script/jquery-3.2.1.min.js"></script>
<script>
    $(function(){
        $("#send").click(function(){
            $.get("get1.txt",
            {
                username:$("#username").val(),
                content:$("#content").val()
            },
            function(data,textStatus){
                $("#resTest").html(data);
            }
            )
        })
    })
</script>

</head>
<body>

<form id="form1" action="#">
    <p>评论</p>
    <p>姓名:<input type="text" name="username" id="username"/></p>
    <p>内容:<textarea name="content" id="content" rows="2" cols="20">
        </textarea></p>
    <p><input type="button" id="send" value="提交"/></p>
</form>
<div id="resTest"></div>

</body>
</html>
图片描述

如同上面的代码,在浏览器出现了跨源错误,请问是什么原因呢?

阅读 2.8k
3 个回答

chrome ajax不能访问文件协议,可以自己搭建一个服务器

新手上路,请多包涵

ajax的请求是一般情况下为了安全是限定了同域名下的,
而且,必须是在服务器上运行的,不知道你这个页面的域名是什么,
比如是localhost/test.html,那么,你的请求的路径应该是

localhost/your_path/get1.txt

这种才行,才是同域名下

Chrome不支持file协议(本地)的ajax……解决方法有两种,一种是搭个简单的静态服务器出来,不需要很复杂的比如像WAMP这种,拉个梯子去Chrome应用商店装个Web Server for Chrome这种简单的服务器,稍微配置下(指定目录啥的)打开再点下给出的链接就行了;还有一种更简单,换掉Chrome改用FireFox,你会收获一个没那么矫情的浏览器和全国语devtools,以及旁人不解的目光[/抠鼻]……

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题