JS跨域解决方案

川长思鸟来 2022-05-28 10:56 357阅读 0赞

# JS跨域解决方案 #

分布式项目架构中，常常遇到js跨域的问题，那么什么是跨域呢？  
跨域情景：  
**1.localhost:8080 的js请求localhost:8081的服务器 (浏览器限制)**  
*chrome浏览器报错：*  
*Failed to load [http://localhost:8081/user/token/d783a30d-fc9b-46be-a787-bd5c630ab56a][http_localhost_8081_user_token_d783a30d-fc9b-46be-a787-bd5c630ab56a]: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘[http://localhost:8080][http_localhost_8080]’ is therefore not allowed access.*  
**2.www.taobao.com 与 www.tianmao.com**

**如何解决js跨域请求：**

1.请求端（localhost:8080）js： dataType : “jsonp”,

$.ajax({
                url : "http://localhost:8093/user/token/" + _ticket,
                dataType : "jsonp",/*关键地方*/
                type : "GET",
                success : function(data){ 
                    if(data.status == 200){
                        var username = data.data.username;
                        var html = username + "，欢迎来到宜立方购物网！<a href=\"http://www.e3mall.cn/user/logout.html\" class=\"link-logout\">[退出]</a>";
                        $("#loginbar").html(html);
                    }
                }
            });

1.服务端（localhost:8081）把返回结果封装成一个js语句响应：

/** * 根据token查询用户信息 【spring4.1以及之前的版本用该方式实现js跨域问题】 * @param token * @return */
       /* @RequestMapping(value = "/user/token/{token}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE) @ResponseBody public String getUserByToken(@PathVariable String token, String callback) { E3Result result = tokenService.getUserByToken(token); // 响应之前，判断是否为jsonp请求 if (StringUtils.isNotBlank(callback)) { // 把结果封装成一个js语句响应 return callback + "(" + JsonUtils.objectToJson(result) + ");"; } return JsonUtils.objectToJson(result); } */
    
        /** * 根据token查询用户信息 【spring4.1以后的版本才支持该方式实现js跨域问题】 * @param token * @return */
        @RequestMapping(value = "/user/token/{token}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
        @ResponseBody
        public Object getUserByToken(@PathVariable String token, String callback) {
            E3Result result = tokenService.getUserByToken(token);
            // 响应之前，判断是否为jsonp请求
            if (StringUtils.isNotBlank(callback)) {
                // 把结果封装成一个js语句响应
                MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
                mappingJacksonValue.setJsonpFunction(callback);
                return mappingJacksonValue;
            }
            return result;
        }

[http_localhost_8081_user_token_d783a30d-fc9b-46be-a787-bd5c630ab56a]: http://localhost:8081/user/token/d783a30d-fc9b-46be-a787-bd5c630ab56a
[http_localhost_8080]: http://localhost:8080