文档章节

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

scymore
 scymore
发布于 2017/02/13 18:07
字数 420
阅读 256
收藏 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

scymore

粉丝 6
博文 34
码字总数 22032
作品 0
成都
程序员
私信 提问
AJAX跨域调用相关知识-CORS和JSONP(引)

AJAX跨域调用相关知识-CORS和JSONP 1、什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容。 但是我们项目开发过程中,经...

辉煌霸猪
06/26
41
0
jsonp-反向代理-CORS解决JS跨域问题的个人总结(更新 v2.0)

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

线上猛如虎_线下怂如鼠
2018/08/18
0
0
常见跨域解决方案以及Ocelot 跨域配置

常见跨域解决方案以及Ocelot 跨域配置 Intro 我们在使用前后端分离的模式进行开发的话,如果前端项目和api项目如果不是一个域名下的话往往会有跨域问题。今天来介绍一下我们在Ocelot网关配置...

WeihanLi
05/11
0
0
跨域解决之JSONP和CORS的详细介绍

JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名、协议、端口均相同。 浏览器执...

kaixin_code
2018/11/26
53
0
Web前端学习笔记之前端跨域知识总结

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

时光飞逝,逝者如斯
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
375
7
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
11
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部