前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Access-Control-Allow-Origin与跨域

Access-Control-Allow-Origin与跨域

作者头像
程序新视界
发布2022-07-29 14:34:02
9750
发布2022-07-29 14:34:02
举报
文章被收录于专栏:丑胖侠丑胖侠

什么是跨域?

JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。通常来说,跨域分为以下几类:

url

说明

是否允许通讯

http://www.a.com/a.js http://www.a.com/b.js

同一域名下

允许

http://www.a.com/lab/a.js http://www.a.com/script/b.js

同一域名下不同文件夹

允许

http://www.a.com:8000/a.jshttp://www.a.com/b.js

同一域名,不同端口

不允许

http://www.a.com/a.jshttps://www.a.com/b.js

同一域名,不同协议

不允许

http://www.a.com/a.jshttp://170.32.82.74/b.js

域名和域名对应ip

不允许

http://www.a.com/a.jshttp://script.a.com/b.js

同一域名,不同二级域名

不允许

http://www.a.com/a.jshttp://a.com/b.js

二级域名和一级域名

不允许(cookie这种情况下也不允许访问)

http://www.b.com/a.jshttp://www.a.com/b.js

不同域名

不允许

跨域例子

此例子存在跨域问题,如需测试,修改地址即可。

代码语言:javascript
复制
<html>  
    <head>  
        <title>title</title>  
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"/>
        <script>  
            $.ajax({  
                url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",  
                type:'GET',  
                success: function(data){  
                    $('body').append( "Name: " + data );  
                }  
            });  
        </script>  
    </head>  
    <body>     
    测试Ajax跨域问题 
    </body> 
</html> 

执行代付,会返回如下错误信息:

代码语言:javascript
复制
XMLHttpRequest cannot load http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228. 
Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX

解决跨域问题

需要在目标页面的response中包含Access-Control-Allow-Origin这个header信息,并且它的值里有请求的域名时,浏览器才允许拿到它页面的数据进行下一步处理。如:

代码语言:javascript
复制
Access-Control-Allow-Origin: http://www.a.com

如果它的值设为 * ,则表示谁都可以用,当然这在生产环境中是不被允许的。

代码语言:javascript
复制
Access-Control-Allow-Origin: *

与Spring集成使用

新建CORSInterceptor类,实现HandlerInterceptor接口,并重写preHandle方法,在此方法中为Header添加此信息:

代码语言:javascript
复制
public class CORSInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, 
                             Object handler) throws Exception {

        response.addHeader("Access-Control-Allow-Origin", "http://www.a.com");

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, 
                           Object handler, ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, 
                                Object handler, Exception ex) throws Exception {

    }
}

然后在Spring配置文件中实例化此类:

代码语言:javascript
复制
<mvc:interceptor>
    <mvc:mapping path="/**"/>
    <bean class="com.test.CORSInterceptor"/>
</mvc:interceptor>

参考文章: http://www.tuicool.com/articles/7FVnMz http://my.oschina.net/BearCatYN/blog/509590 http://www.oicqzone.com/pc/2014083019610.html

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-02-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是跨域?
  • 跨域例子
  • 解决跨域问题
  • 与Spring集成使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档