Javaweb使用cors完成跨域ajax数据交互
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。
cors
全称：Cross-Origin Resource Sharing
中文意思：跨域资源共享
它在维基百科上的定义是：跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。
1、通过Maven引用
cors-filter、<span style="font-family: Arial, Helvetica, sans-serif;">java-property-utils二个jar包，修改pom.xml文件，加入下面内容</span>
<!-- 跨域问题 --> <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>cors-filter</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>com.thetransactioncompany</groupId> <artifactId>java-property-utils</artifactId> <version>1.10</version> </dependency>
2、在web.xml里面配置过滤器，使用引入的jar中定义好的过滤器。注意修改cors.allowOrigin节点，如果允许所有站点跨域访问，可以修改为[*],如果是多个站点，可以用[,]分隔配置。
<!-- 跨域问题 --> <filter> <description>跨域过滤器</description> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>https://127.0.0.1:8380</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>
3、通过jQuery跨域调用数据,实例代码如下:
<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>跨域测试</title>
<style type="text/css">
body{
margin:0px auto 0px auto;
}
.p_container {
margin: 0px auto 0px auto;
width: 100%;
height: 200px;
}
.p_container > iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<p>
</p>
<button id="btn_test">跨域调用</button>
<p id="p_show"></p>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn_test').click(function () {
//alert('dddd');
//var iframe_main = $("#iframe_main").contents();
//iframe_main.find("#account").val('test');
$.ajax({
url: "https://10.18.25.119:8480/jxfp/index.jsp",
type: "GET",
dataType: "text",
timeout: 10000,
xhr: function () { //这是关键 获取原生的xhr对象 做以前做的所有事情
var xhr = jQuery.ajaxSettings.xhr();
xhr.withCredentials = true;
return xhr;
},
success: function (data) {
$("#p_show").html(data);
//Console.log(data);
},
error: function (e) {
$("#p_show").html(e.statusText);
}
});
});
});
</script>
</body>
</html>
以上就是是小编分享给大家的Javaweb使用cors完成跨域ajax数据交互的全部内容，希望对大家有所帮助。如果在阅读过程中有什么问题，可以给小编留言，我会及时回复大家的。也希望大家多多支持我们！
相关推荐
-
Javaweb项目session超时解决方案
在Java Web开发中,Session为我们提供了很多方便,Session是由浏览器和服务器之间维护的.Session超时理解为:浏览器和服务器之间创建了一个Session,由于客户端长时间(休眠时间)没有与服务器交互,服务器将此Session销毁,客户端再一次与服务器交互时之前的Session就不存在了. 0.需求 需要对所有的/web/**请求进行登录拦截,Session超时时跳转到登录页面. 1.引入 一般来说,在项目使用中都会配置Session超时时间,如果不配置,则默认值为30分钟,
-
JavaWeb Servlet中Filter过滤器的详解
JavaWeb Servlet中Filter过滤器的详解 1.简述 Filter过滤器,对web服务器所有web资源进行过滤,从而实现一些特殊的功能(权限访问控制.过滤敏感词汇.压缩响应信息).Filter能够对Servlet容器的请求和响应进行检查和修改,其本身不能生成请求request和响应response,只提供过滤作用(Servlet被调用之前检查Request对象修改其相关信息,Servlet被调用后检查Response修改其相关信息),Filter对象常驻服务器. 2.Lifecyc
-
JavaWeb Servlet中url-pattern的使用
JavaWeb Servlet中url-pattern的使用 1.Sevlet和Filter的url-pattern相关说明 一个页面请求根据url-pattern只匹配一个最佳的Servlet,而根据web.xml的filter-mapping标签的先后顺序,将满足要求的一个或者多个过滤器生成一个FilterChain 2.url-pattern配置 配置web.xml文件,用于定义映射的含义: (1)."/"开头-->路径映射 (2)."*.do&q
-
Web技术实现移动监测的介绍
Web技术实现移动监测的介绍 由上述引用语句可得出"移动监测"需要以下要素: 一个拥有摄像头的计算机用于判断移动的算法移动后的处理 注:本文涉及的所有案例均基于 PC/Mac 较新版本的 Chrome / Firefox 浏览器,部分案例需配合摄像头完成,所有截图均保存在本地. 对方不想和你说话,并向你扔来一个链接: 体验链接>> 综合案例 该案例有以下两个功能: 拍好 POST 后的 1 秒会进行拍照静止 1 秒后音乐会停止,产生移动会恢复播放状态 上述案例也许并不能直接
-
web前端超出两行用省略号表示的实现方法
web前端超出两行用省略号表示的实现方法 HTML <span class="GW_bod0112211"> 吐鲁番特级无炳黑加仑葡萄干500g包邮无籽吐鲁番特级无炳黑加仑葡萄干500g包邮无籽吐鲁番特级无炳黑加仑葡萄干500g包邮无籽,超大孕妇零食 </span> CSS span{ height: 40px; line-height: 20px; width: 300px; display: -webkit-box; -webkit-line-clamp:2
-
JavaWeb项目中dll文件动态加载方法解析（详细步骤）
相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO文件动态加载方法的文章. 在Java Web项目中,我们经常会用到通过JNI调用dll动态库文件来实现一些JAVA不能实现的功能,或者是一些第三方dll插件.通常的做法是将这些dll文件复制到 %JAVA_HOME%\jre\bin\ 文件夹或者 应用中间件(Tomcat|Weblogic)的bin
-
Javaweb使用cors完成跨域ajax数据交互
跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. cors 全称:Cross-Origin Resource Sharing 中文意思:跨域资源共享 它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源.而
-
浅谈Koa2框架利用CORS完成跨域ajax请求
实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置. 本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明(深层次的配置我也不会). CORS将请求分为简单请求和非简单请求,可以简单的认为,简单请求就是没有加上额外请求头部的get和post请求,并且如果是post请求,请求格式不能是application/json(因为我对这一块理解不深如果错误希望能有人指出错误并提出修改意见).而其余的,put.post请求,Content-Type为appl
-
jQuery使用ajax跨域获取数据的简单实例
jQuery使用ajax跨域获取数据的简单实例 var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no transport,我没去深想. $.ajax ({ type: "POST", contentType: "application/x-www-form-urlencoded",
-
AJAX跨域请求数据的四种方法(实例讲解)
由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了 通过该对象进行获取 获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请
-
解决ajax跨域请求数据cookie丢失问题
前端: 以jquery为例: 需要加入 复制代码 代码如下: xhrFields: { withCredentials: true }, crossDomain: true, $.ajax({ type: postType, url: url, data: postData || '', xhrFields: { withCredentials: tru
-
Ajax的jsonp方式跨域获取数据的简单实例
jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b
-
JS跨域解决方案之使用CORS实现跨域
引言 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. 和大多数跨域的解决方案一样,JSONP也是我的选择,可是某天PM的需求变了,某功能需要改成支持POST,因为传输的数据量比较大,GET形式搞不定.所以折腾了下闻名已久的CORS(跨域资源共享,Cross-Origin Resour
-
浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法
由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get
-
django基于cors解决跨域请求问题详解
一 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名:127.0.0.1:8001一段数据 浏览器上就会报错,这个就是同源策略的保护,如果浏览器对javas
-
jsonp跨域请求数据实现手机号码查询实例分析
本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&