跨域解决方法--未完成

最新推荐文章于 2025-03-01 10:20:49 发布

原创最新推荐文章于 2025-03-01 10:20:49 发布 · 468 阅读

CC 4.0 BY-SA版权

跨域是浏览器的安全机制,本身是可以访问到其他项目的接口,只是在返回浏览器的时候被浏览器处理掉了。
跨域只是前端的问题。
后端各个项目，接口与接口间不存在跨域问题。

跨域测试页面
项目A

	@GetMapping("/crossDomainPage.jspx")
	public ModelAndView crossDomainPage(){
		ModelAndView mv = new ModelAndView();
		mv.setViewName("crossDomainPage");
		return mv;
	}

页面crossDomainPage.ftl

<body>
<h1>跨域解决方案测试</h1>
    <input type="button" value="跨域请求" onclick="cross()" style="widows: 100px;height: 40px" >
</body>

//-----------------------------------------------------------------------------------------------

<script>
    function cross(){

        var url = "http://b.it.com:8301/crossDomain.do";

        $.ajax({
            url:url,
            type:'POST',
            dataType:'json',
            data:{},
            success:function (data) {
                alert(data.status + "----" + data.msg);
            }
        })
    }

</script>

项目B ajax接口

	@RequestMapping("/crossDomain.do")
	@ResponseBody
	public Map crossDomain(HttpServletResponse response){
		HashMap<String, Object> map = new HashMap<>();
		map.put("status","success");
		map.put("msg","跨域请求返回成功!");
		return map;
	}

---------------------------------------基础模型建立完毕, 以上存在ajax请求跨域问题---------------------------------------

方法一: 处理response响应头
项目B ajax接口

	@RequestMapping("/crossDomain.do")
	@ResponseBody
	public Map crossDomain(HttpServletResponse response){
		response.setHeader("Access-Control-Allow-Origin", "*");     //处理响应头
		HashMap<String, Object> map = new HashMap<>();
		map.put("status","success");
		map.put("msg","跨域请求返回成功!");
		return map;
	}

方法二: jsonp 只适用于get请求