springmvc,注解CrossOrigin允许跨域及其使用场合

通过测试，我们可以发现： js跨域是浏览器的行为; “未配置为允许跨域”的接口也可以被jquery代码访问，但浏览器禁止了对响应结果的操作；我们通过http-client直接调用接口并不受跨域的限制；所以CrossOrigin主要帮助页面上访问非本域的接口。参见下图

(图一）

（图二)

参考资料:

http://blog.csdn.net/relucent/article/details/45716325

https://www.zhihu.com/question/19618769

测试代码


<html>
<head>
	<!-- 
    <meta http-equiv="Access-Control-Allow-Origin" content="*">  
	 -->
	<meta charset="UTF-8">
	<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	function showMessage(url){
		$.getJSON(
			url,
			function(data){
				alert(data.msg);
			}
		);
	}
	
	function doClick(){
		var url = "http://127.0.0.1:8080/mgr/test/msg";
		showMessage(url);
	}
	
	function doClick0(){
		var url = "http://127.0.0.1:8080/mgr/test/msg0";
		showMessage(url);
	}
	</script>
</head>

<body>
<br/>
<br/>
<input type="button" value="允许跨域" onclick="doClick()"/>
<br/>
<input type="button" value="未允许跨域" onclick="doClick0()"/>
</body>
</html>

服务器端:

/**
     * 已配为允许跨域访问
     * @return
     */
    @CrossOrigin(origins = "*",maxAge = 3000)
    @RequestMapping(value = "msg") @ResponseBody public Map<String,Object> getMessage(){
        Map<String,Object> ret = new LinkedHashMap<>();
        ret.put("code", 0);
        ret.put("msg", "msg");
        logger.info("ret:"+ret.toString());
        return ret;
    }

    /**
     * 未配置允许跨域访问
     * @return
     */
    @RequestMapping(value = "msg0") @ResponseBody public Map<String,Object> getMessage0(){
        Map<String,Object> ret = new LinkedHashMap<>();
        ret.put("code", 0);
        ret.put("msg", "msg0");
        logger.info("ret:"+ret.toString());
        return ret;
    }

注: CrossOrigin 需要jdk1.8+、spring 4.2+

springmvc,注解CrossOrigin允许跨域及其使用场合

猜你喜欢