还在问跨域？本文记录js跨域的多种实现实例

　　前言

　　众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现

　　前期准备

　　为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、改、查接口）服务提供者，10087服务消费者，消费者有一个页面test.html跟一个后端controller

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- 引入静态资源 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</head>
<body>
    <h3>直接ajax请求10086服务的接口</h3>
    <button id="button">发送ajax请求</button>
    <br/>
    <textarea id="text" style="width: 380px; height: 380px;">

    </textarea>
</body>
<script th:inline="javascript">
    ctx = [[${#request.getContextPath()}]];//应用路径

    //绑定按钮点击事件
    $("body").on("click","#button",function(e){
        $("#text").text("");

        //发送ajax请求
        $.get("http://localhost:10086/tbUser/get/1",function (data) {
            $("#text").text(data);
        })
    })
</script>
</html>
    @RequestMapping("page/test")
    public ModelAndView pageLogin() {
        return new ModelAndView("test.html");
    }

　　我们先启动10086服务

　　浏览器访问接口，正常获取数据

　　启动10087服务

　　访问test.html页面，直接ajax请求10086服务的接口，直接报错

 

 　　几种跨域方式

　　1、后端安全跨域

　　前端发起请求后端，后端使用httpclient（使用方法参考：httpclient+jsoup实现小说线上采集阅读）或者feign（使用方法参考：SpringCloud系列——Feign 服务调用）安全跨域

　　我们给10087服务消费者新增两个controller接口，用于后台调用10086跟响应数据，并修改test.html

　　httpclient

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- 引入静态资源 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</head>
<body>
    <h3>后端安全跨域（httpclient）</h3>
    <button id="button">发送ajax请求</button>
    <br/>
    <textarea id="text" style="width: 380px; height: 380px;">

    </textarea>
</body>
<script th:inline="javascript">
    ctx = [[${#request.getContextPath()}]];//应用路径
    //绑定按钮点击事件
    $("body").on("click","#button",function(e){
        $("#text").text("");
        //发送ajax请求
        $.get(ctx + "/test/httpclient",{id:"1"},function (data) {
            $("#text").text(data);
        })
    })
</script>
</html>
    @RequestMapping("/test/httpclient")
    public Object httpclient(String id) {
        String result = null;
        try {
            //创建httpclient对象 (这里设置成全局变量，相对于同一个请求session、cookie会跟着携带过去)
            CloseableHttpClient httpClient = HttpClients.createDefault();
            //创建get方式请求对象
            HttpGet httpGet = new HttpGet("http://localhost:10086/tbUser/get/"+id);
            httpGet.addHeader("Content-type", "application/json");
            //包装一下
            httpGet.addHeader("User-Agent", "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36");
            httpGet.addHeader("Connection", "keep-alive");

            //通过请求对象获取响应对象
            CloseableHttpResponse response = httpClient.execute(httpGet);
            //获取结果实体
            if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
                result = EntityUtils.toString(response.getEntity(), "GBK");
            }

            //释放链接
            response.close();
        }
        //这里还可以捕获超时异常，重新连接抓取
        catch (Exception e) {
            result = null;
            e.printStackTrace();
        }
        return result;
    }

 

　　feign

　　我们先在10087服务消费者修改test.html，新增controller接口，maven引入feign，创建TestFeign，值得注意的是消费者的返回值必须与提供者的返回值一致，参数对象也要一致

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- 引入静态资源 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</head>
<body>
    <h3>后端安全跨域（feign）</h3>
    <button id="button">发送ajax请求</button>
    <br/>
    <textarea id="text" style="width: 380px; height: 380px;">

    </textarea>
</body>
<script th:inline="javascript">
    ctx = [[${#request.getContextPath()}]];//应用路径
    //绑定按钮点击事件
    $("body").on("click","#button",function(e){
        $("#text").text("");
        //发送ajax请求
        $.get(ctx + "/test/feign",{id:"1"},function (data) {
            $("#text").text(data);
        })
    })
</script>
</html>
@FeignClient(name = "http://localhost:10086", path = "/tbUser/")
public interface TestFeign {
    @RequestMapping(value = "get/{id}")
    Result<UserVo> get(@PathVariable("id") Integer id);
}
    @Autowired
    private TestFeign testFeign;

    @RequestMapping("/test/feign")
    public Object feign(Integer id){
        return testFeign.get(id);
    }

　　直接使用url会报这个错，因为我们没有注册这两个服务，eureka也没起...，所以想使用feign调用，两个服务都需要在eureka上注册，负载均衡器才能找到它

　　我们将两个服务注册到eureka上（参考springcloud系列博客之SpringCloud系列——Eureka 服务注册与发现），将@FeignClient(name = "http://localhost:10086", path = "/tbUser/")的name的值改成10086服务提供者的 spring.application.name的值即可

 

　　2、jsonp

　　　由于同源策略，浏览器禁止向不同源的服务器发起请求，但是 HTML 的<script> 元素是一个例外，我们可以利用标签的src发起请求，服务提供者的后端响应消费者期望的数据格式（必须是符合js对象的格式，否则会在回调函数解析的时候报错）

　　我们先重写10086服务提供者的get接口，使其返回值符合消费者期待的格式

@RestController
@RequestMapping("/tbUser/")
public class TbUserController extends CommonController<TbUserVo, TbUser, Integer> {
    @Autowired
    private TbUserService tbUserService;

    @RequestMapping("get")
    public Object get(Integer id, String callback) {
        Result<TbUserVo> result = super.get(id);
        TbUserVo tbUserVo = result.getData();
        StringBuffer re = new StringBuffer();
        re.append("{");
        re.append("'flag':'" +  result.isFlag() + "',");
        re.append("'msg':'" +  result.getMsg() + "',");
        re.append("'data':{");
        re.append("'id':'" +  tbUserVo.getId() + "',");
        re.append("'username':'" +  tbUserVo.getUsername() + "',");
        re.append("'password':'" +  tbUserVo.getPassword() + "',");
        re.append("'created':'" +  tbUserVo.getCreated() + "',");
        re.append("'descriptionId':'" +  tbUserVo.getDescriptionId()+"'");
        re.append("}}");
        return callback + "(" + re.toString() + ")";
    }
}

　　修改10087服务消费者的test.html

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- 引入静态资源 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</head>
<body>
    <h3>jsonp</h3>
    <button id="button">发送ajax请求</button>
    <br/>
    <textarea id="text" style="width: 380px; height: 380px;">

    </textarea>
</body>
<script th:inline="javascript">
    ctx = [[${#request.getContextPath()}]];//应用路径
    //绑定按钮点击事件
    $("body").on("click","#button",function(e){
        //构造一个<srcipt>标签
        $("body").append("<script id='temporaryScript'  src=\"http://localhost:10086/tbUser/get?id=1&callback=callback\"><\/script>");
    })

    //回调
    function callback(data) {
        $("#text").text("");
        $("#text").text(JSON.stringify(data));
        //过河拆桥
        $("#temporaryScript").remove();
    }
</script>
</html>

　　


　　3、cors

　　详情介绍可以看这里：CORS通信 ，代码实现过程参考：Java实现CORS跨域请求 

　　参考大佬博客，我们在10086服务提供者新建一个CorsFilter过滤器，

@Component
@ServletComponentScan
@WebFilter(filterName = "corsFilter", //过滤器名称
        urlPatterns = "/tbUser/*",//拦截路径
        initParams = {@WebInitParam(name = "allowOrigin", value = "http://localhost:10087"),//允许来源
                @WebInitParam(name = "allowMethods", value = "GET,POST,PUT,DELETE,OPTIONS"),//允许请求方法
                @WebInitParam(name = "allowCredentials", value = "true"),
                @WebInitParam(name = "allowHeaders", value = "Content-Type,X-Token")})
public class CorsFilter implements Filter {

    private String allowOrigin;
    private String allowMethods;
    private String allowCredentials;
    private String allowHeaders;
    private String exposeHeaders;

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        allowOrigin = filterConfig.getInitParameter("allowOrigin");
        allowMethods = filterConfig.getInitParameter("allowMethods");
        allowCredentials = filterConfig.getInitParameter("allowCredentials");
        allowHeaders = filterConfig.getInitParameter("allowHeaders");
        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        if (!StringUtils.isEmpty(allowOrigin)) {
            if(allowOrigin.equals("*")){
                response.setHeader("Access-Control-Allow-Origin", allowOrigin);
            }else{
                List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
                if (allowOriginList != null && allowOriginList.size() > 0) {
                    String currentOrigin = request.getHeader("Origin");
                    if (allowOriginList.contains(currentOrigin)) {
                        response.setHeader("Access-Control-Allow-Origin", currentOrigin);
                    }
                }
            }
        }
        if (!StringUtils.isEmpty(allowMethods)) {
            response.setHeader("Access-Control-Allow-Methods", allowMethods);
        }
        if (!StringUtils.isEmpty(allowCredentials)) {
            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
        }
        if (!StringUtils.isEmpty(allowHeaders)) {
            response.setHeader("Access-Control-Allow-Headers", allowHeaders);
        }
        if (!StringUtils.isEmpty(exposeHeaders)) {
            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

 

　　然后修改10087服务消费者调用方式，改成普通的ajax请求即可

<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跨域测试</title>
    <!-- 引入静态资源 -->
    <script th:src="@{/js/jquery-1.9.1.min.js}" type="application/javascript"></script>
</head>
<body>
    <h3>cors</h3>
    <button id="button">发送ajax请求</button>
    <br/>
    <textarea id="text" style="width: 380px; height: 380px;">

    </textarea>
</body>
<script th:inline="javascript">
    ctx = [[${#request.getContextPath()}]];//应用路径
    //绑定按钮点击事件
    $("body").on("click","#button",function(e){
        //发送ajax请求
        $.get("http://localhost:10086/tbUser/get/1",function (data) {
            $("#text").text("");
            $("#text").text(JSON.stringify(data));
        })
    })
</script>
</html>

 

　　在启动10086服务提供者时出现一个启动报错，说corsFilter已经存在，叫我们改名或者启用覆盖，我们启用一下覆盖  PS：最好是重命名我们的bean

 

　　启动成功后我们进行测试

　　测试下list请求，修改这一部分

        //发送ajax请求
        $.post("http://localhost:10086/tbUser/list",{username:"张三"},function (data) {
            $("#text").text("");
            $("#text").text(JSON.stringify(data));
        })

　　没有问题！

 　　以上是CORS是基于Filter过滤器的实现，事实上，springboot通过@CrossOrigin注解优雅的实现CORS跨域，我们在10086服务提供者的controller层那里加入@CrossOrigin注解：

@RestController
@RequestMapping("/tbUser/")
@CrossOrigin(origins = "http://localhost:10087", methods = "GET,POST,PUT,DELETE,OPTIONS", allowedHeaders = "Content-Type,X-Token",allowCredentials = "true")
public class TbUserController extends CommonController<TbUserVo, TbUser, Integer> {
    @Autowired
    private TbUserService tbUserService;

}

　　@CrossOrigin注解，官方文档：https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

　　1、Spring 4.2之后提供了跨域注解 @CrossOrigin;

　　2、可以用在方法或Controller上;

　　3、Controller和方法上都有时，Spring会合并两个注解的属性一起使用；

　　注解属性有以下7个：

String[] value() default {}
String[] origins() default {} //允许来源
String[] allowedHeaders() default {}
String[] exposedHeaders() default {}
RequestMethod[] methods() default {} //允许调用方法
String  allowCredentials() default {}
long maxAge() default -1L

 

　　如果是SpringBoot项目，还有更简洁的配置，我们看一下官网介绍：CORS Support

management.endpoints.web.cors.allowed-origins=http://localhost:10087
management.endpoints.web.cors.allowed-methods=GET,POST,PUT,DELETE,OPTIONS

 

　　后记

 　　跨域暂时先记录到这里，如果大家发现有什么错误，还望指正

 

posted @ 2019-03-08 18:18  huanzi-qch  阅读(701)  评论(0)  编辑  收藏  举报