码迷,mamicode.com
首页 > Web开发 > 详细

ajax跨域访问及其解决方案

时间:2016-05-22 18:22:16      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

用ajax方式请求别的网站,就会发生跨域请求问题,

XMLHttpRequest cannot load http://google.com/.
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
Origin ‘http://run.jsbin.io‘ is therefore not allowed access.

编一个服务器端servlet测试一下

    @RequestMapping("/haha")
    @ResponseBody
    String haha(String haha, HttpServletRequest req, HttpServletResponse resp) {
        //resp.addHeader("Access-Control-Allow-Origin", "null");
        System.out.println(haha);
        System.out.println("you accessed!!!");
        return haha + " : " + req.getMethod();
    }

我用的是spring mvc,如果RequestMapping不带参数,默认为‘/‘,如果请求找不到,那就去找它.

无参数的RequestMapping只允许有一个,否则无法部署,报错.

在spring mvc中,如果没有规定请求方式,默认是都可以,无论是get还是post都能够找到资源,只要url正确就行.

下面用ajax请求这个servlet

<body>
    <h1 id=‘resp‘></h1> 
        <input id=‘haha‘ type=‘text‘></input> 
</body>
<script type="text/javascript">
    $(#haha).keydown(function(event) {
        console.log(event.which)
        if(event.which==13){
            $.get(http://localhost:8080/news/haha,{haha:wyf},function(data){
                console.log(data)
                console.log(get over)
            })
        }
    });
</script>

服务器端输出了"you succeed!!!",这说明对于跨域请求服务器是搭理了的,问题出在服务器禁止返回或者是浏览器不允许用户查看返回的内容.

据我猜测,很有可能是后者,即:chrome分析返回结果,发现跨域了,于是不让用户看了.

解决方案很简单:编一个表单进行提交,因为只有ajax才存在跨域访问问题,而提交表单跟ajax不一样.

提交表单之后服务器端决定了浏览器端页面的跳转,把权力完全交给了服务器,而ajax只是通过服务器获取数据

下面的表单是可以提交成功的

    <form action=‘http://localhost:8080/news/haha‘ method="GET">
        <input id=‘haha‘ type=‘text‘></input>
        <input type="submit"></input>
    </form>

可是填写表单太麻烦,于是可以虚拟表单并提交

    $(document).ready(function(){
        var form=$(‘<form></form>‘)
        $(form).attr({"action":‘http://localhost:8080/news/haha‘,"method":‘post‘}).append("<input name=‘haha‘ value=‘haha weidiao‘>")
        $(form).submit()
        console.log(‘haha‘)
    })

 

ajax跨域访问及其解决方案

标签:

原文地址:http://www.cnblogs.com/weidiao/p/5517151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!