文档章节

利用cors,实现js跨域访问Tomcat下资源

scymore
 scymore
发布于 2017/02/13 18:07
字数 420
阅读 164
收藏 0

第一步:页面js代码:

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        xhr.open(method, url, true);
    } elseif (typeof XDomainRequest != "undefined"){
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

var request = createCORSRequest("get", "http://192.168.5.221:8080/");
if (request){
    request.onreadystatechange = function(){
        if (request.readyState == 4 && request.status == 200) {
            var response = request.responseText;
            console.log(response)
        }   
    request.send();
}

第二步:在tomcat服务器下webapps/ROOT目录下创建如下两个xml文件
clientaccesspolicy.xml

<?xml version="1.0" encoding="utf-8" ?>
<access-policy>
    <cross-domain-access>
        <policy>
            <allow-from http-request-headers="*">
                <domain uri="*"/>
            </allow-from>
            <grant-to>
                <resource path="/" include-subpaths="true"/>
            </grant-to>
        </policy>
    </cross-domain-access>
</access-policy>

crossdomain.xml

<?xml version="1.0"?>
    <cross-domain-policy>
        <allow-access-from domain="*"/>
    </cross-domain-policy>

第三步:在Tomcat服务器下conf/web.xml中,或者项目WEB-INF/web.xml中,我选择的是在项目下配置过滤器。我验证了两个,一个是tomcat下自带的cors过滤器,一个是cors-filter-1.7.jar下的过滤器。两个我都测试了,没问题。

应用tomcat的filter配置如下:参数cors.allowOrigin可以指定具体的源来访问

<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
    <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
    </init-param>
    <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposed.headers</param-name>
        <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
    </init-param>
    <init-param>
        <param-name>cors.support.credentials</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>cors.preflight.maxage</param-name>
        <param-value>10</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

或者应用cors-filter-1.7.jar,还需要java-property-utils-1.9.jar,可以在http://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter 选择某个版本导入pom.xml中,自动导入jar包。

配置如下:参数cors.allowOrigin可以指定具体的源来访问

<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, POST, HEAD, PUT, DELETE</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
</init-param>
<init-param>
<param-name>cors.exposedHeaders</param-name>
<param-value>Set-Cookie</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

 

© 著作权归作者所有

共有 人打赏支持
scymore
粉丝 6
博文 34
码字总数 22032
作品 0
成都
程序员
jsonp-反向代理-CORS解决JS跨域问题的个人总结(更新 v2.0)

网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下。 解决 js 跨域问题一共有8种方法: jsonp(只支持 get) 反向代理 CORS document.domain + iframe 跨域 window.name + ...

线上猛如虎_线下怂如鼠
08/18
0
0
Web前端学习笔记之前端跨域知识总结

0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录。...

时光飞逝,逝者如斯
08/08
0
0
jsonp跨域获取数据实现百度搜索

本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0......

行无忌
06/25
0
0
【Js】---JS中的跨域问题

一、什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造...

LYQ1990
03/07
0
0
重学JS(十一)—— 手把手带你跨域

有一天有人跑来跟我定方案,问我cors是什么原理,一脸懵逼,跨域我只知道jsonP啊,眼看一个装逼的机会就要失去了。 “我现在有点忙,待会找你”。 机智的我马上回到工位,百度百度百度。 同源...

闪闪发光的狼
05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day92-20180918-英语流利阅读-待学习

健身最大的敌人不是懒惰,而是逞强 Daniel 2018-09-19 1.今日导读 还记得 2008 年北京奥运会运动员刘翔的退赛风波吗?那天几乎所有中国人都将视线聚焦在了鸟巢体育馆 110 米栏的项目上,迫不...

飞鱼说编程
24分钟前
2
0
70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
3
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
56
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部