第一步:页面js代码:

function createCORSRequest(method, url){var xhr = new XMLHttpRequest();if ("withCredentials" in xhr){xhr.open(method, url, true);} else if (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>

第一次写博客,有什么不好的地方,欢迎指导!

参考文献:

http://www.nczonline.net/blog/2010/05/25/cross-domain-ajax-with-cross-origin-resource-sharing/

http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

http://ibleave60.blog.51cto.com/2669415/1208652

http://blog.csdn.net/liumm0000/article/details/8443550

转载于:https://www.cnblogs.com/chiyouguli/p/4283349.html

利用cors,实现js跨域访问Tomcat下资源相关推荐

  1. jsonp-反向代理-CORS解决JS跨域问题的个人总结

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

  2. js跨域访问,No 'Access-Control-Allow-Origin' header is present on the requested resource

    js跨域访问提示错误:XMLHttpRequest cannot load http://...... No 'Access-Control-Allow-Origin' header is prese ...

  3. Ajax跨域访问Tomcat服务器

    在学习jQuery的时候进行到AJax时,需要与服务器进行交互练习.我毫不犹豫的打开了我的Tomcat服务器运行起来,并使用普通的ajax方法访问运行中的服务器网址的时候,发现 XMLHttpRequ ...

  4. cors跨域_Nginx通过CORS配置实现跨域访问

    什么是跨域 跨域是指跨域名的访问,以下情况都属于跨域: 跨域原因说明 示例 域名不同 www.jd.com 与 www.taobao.com 域名相同,端口不同 www.jd.com:8080 与 w ...

  5. JS跨域访问(ajax跨域)

    好吧,国庆有点不务正业,玩了几天游戏,咳咳 感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言 为什么会出现跨域? 跨域的产生是因 ...

  6. js 跨域访问问题解决方法

    什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 有什么完美的解决方案么 ...

  7. js跨域访问获取json数组并解析

    跨域访问需要在服务器端配置,客户端才能够访问 服务器端: <?php    //服务端返回JSON数据  $arr="[{'quesTitle':'关于专利申请','quesAskTi ...

  8. [Vue.js]跨域访问四种解决方法

    2019独角兽企业重金招聘Python工程师标准>>> 报错: has been blocked by CORS policy: Response to preflight requ ...

  9. 什么是JS跨域访问 如何实现跨域访问

    >什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...

最新文章

  1. 关于机器学习的领悟与反思(张志华北大数学系教授)
  2. 前端如何实现图片懒加载(lazyload) 提高用户体验
  3. 安装Android studio打不开,提示the environment variable HAVA_HOME does not point to a val
  4. 编程贺卡c语言,C++实现新年贺卡程序
  5. mysql中语句块当事务,MySQL事务与隔离级别
  6. ApacheCN Asp.NET 译文集 20211126 更新
  7. js 获取相同name元素的属性值
  8. 星环大数据 学习笔记(76) —— Kafka 运维常用命令
  9. os+rom+android+6.0+n9005,三星S8+官方韩版安卓9固件rom系统线刷升级包:G955NKSU3DSG5
  10. 计算机1M代表什么,1M网速是多少 Mbps是什么意思
  11. git commit message——git提交日志规范备忘
  12. 小组取什么名字好_生日日期做网名,取什么名字好?
  13. Android通讯录导入到Iphone
  14. 单核浏览器和双核浏览器有什么区别,哪个好用?
  15. 安卓开发5-fragment和activity
  16. 【LeViT: a Vision Transformer in ConvNet’s Clothing for Faster Inference论文解读】
  17. 工程伦理 第九章习题 答案
  18. PAT A1091 Acute Stroke ——帘卷西风,人比黄花瘦
  19. YOLOV7调试的bug
  20. 【梯度下降法】Python 梯度下降法拟合正弦曲线 多项式函数傅里叶函数

热门文章

  1. mysql多数据源切换_CI 多数据库操作 切换数据库
  2. php 留言板分页显示,php有分页的留言板,留言成功后怎么返回当前页?
  3. centos7 python3 sqlserver,centos7中python3环境支持s
  4. python extract的使用_Python extract及contains方法代码实例
  5. zookeeper 密码_Dubbo、ZooKeeper介绍
  6. diag开关什么意思_双控开关接线图_一灯双控开关接线图_单联双控开关接线图_双控开关接线图实物图...
  7. java算法概述,Java数据结构与算法基础(一)概述与线性结构
  8. rtmp协议 java_基于rtmp协议的java多线程服务器
  9. Python 小白从零开始 PyQt5 项目实战(3)信号与槽的连接
  10. ue4 android vulkan,在Android用vulkan完成蓝绿幕扣像