Javaweb如何利用cors完成跨域ajax数据交互的实例分析-java教程-PHP中文网

首页

Java

java教程

Javaweb如何利用cors完成跨域ajax数据交互的实例分析

黄舟

Sep 20, 2017 am 10:13 AM

cors javaweb web

本文由跨域、cors的概念开始，进而向大家介绍了Javaweb使用cors完成跨域ajax数据交互的相关内容，需要的朋友可以了解下。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。

cors

全称：Cross-Origin Resource Sharing

中文意思：跨域资源共享

它在维基百科上的定义是：跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。

1、通过Maven引用

cors-filter、java-property-utils二个jar包，修改pom.xml文件，加入下面内容

<!-- 跨域问题 --> 
  <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 () { 
   $(&#39;#btn_test&#39;).click(function () { 
    //alert(&#39;dddd&#39;); 
    //var iframe_main = $("#iframe_main").contents(); 
    //iframe_main.find("#account").val(&#39;test&#39;); 
    $.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数据交互的实例分析的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1670

CakePHP 教程

1428

Laravel 教程

1329

PHP教程

1276

C# 教程

1256

显示更多

Related knowledge

Nginx的Web服务器caddy怎么使用 May 30, 2023 pm 12:19 PM

Caddy简介Caddy是一款功能强大，扩展性高的Web服务器，目前在Github上已有38K Star。Caddy采用Go语言编写，可用于静态资源托管和反向代理。Caddy具有如下主要特性：对比Nginx复杂的配置，其独创的Caddyfile配置非常简单；可以通过其提供的AdminAPI实现动态修改配置；默认支持自动化HTTPS配置，能自动申请HTTPS证书并进行配置；能够扩展到数以万计的站点；可以在任意地方执行，没有额外的依赖；采用Go语言编写，内存安全更有保证。安装首先我们直接在CentO

Web 端实时防挡脸弹幕（基于机器学习） Jun 10, 2023 pm 01:03 PM

防挡脸弹幕，即大量弹幕飘过，但不会遮挡视频画面中的人物，看起来像是从人物背后飘过去的。机器学习已经火了好几年了，但很多人都不知道浏览器中也能运行这些能力；本文介绍在视频弹幕方面的实践优化过程，文末列举了一些本方案可适用的场景，期望能开启一些脑洞。mediapipeDemo（https://google.github.io/mediapipe/）展示主流防挡脸弹幕实现原理点播up上传视频服务器后台计算提取视频画面中的人像区域，转换成svg存储客户端播放视频的同时，从服务器下载svg与弹幕合成，人像

怎么配置nginx保证frps服务器与web共用80端口 Jun 03, 2023 am 08:19 AM

首先你会有个疑惑，frp是什么呢？简单的说frp就是内网穿透工具，配置好客户端以后，可以通过服务器来访问内网。现在我的服务器，已经用nginx做站了，80端口只有一个，那如果frp的服务端也想使用80端口，那应该怎么办呢？经过查询，这个是可以实现的，就是利用nginx的反向代理来实现。补充一下：frps就是服务器端（server），frpc就是客户端（client）。第一步：修改服务器中nginx.conf配置文件在nginx.conf中http{}里添加以下参数，server{listen80

Java API 开发中使用 Jetty7 进行 Web 服务器处理 Jun 18, 2023 am 10:42 AM

JavaAPI开发中使用Jetty7进行Web服务器处理随着互联网的发展，Web服务器已经成为了应用程序开发的核心部分，同时也是许多企业所关注的焦点。为了满足日益增长的业务需求，许多开发人员选择使用Jetty进行Web服务器开发，其灵活性和可扩展性受到了广泛的认可。本文将介绍如何在JavaAPI开发中使用Jetty7进行We

如何使用Golang实现Web应用程序的表单验证 Jun 24, 2023 am 09:08 AM

表单验证是Web应用程序开发中非常重要的一个环节，它能够在提交表单数据之前对数据进行有效性检查，避免应用程序出现安全漏洞和数据错误。使用Golang可以轻松地实现Web应用程序的表单验证，本文将介绍如何使用Golang来实现Web应用程序的表单验证。一、表单验证的基本要素在介绍如何实现表单验证之前，我们需要知道表单验证的基本要素是什么。表单元素：表单元素是指

如何在PHP-Slim框架中使用CORS跨域请求？ Jun 03, 2023 am 08:10 AM

在Web开发中，跨域请求是一个常见的问题。这是因为浏览器对于不同域名之间的请求有严格的限制。例如，网站A的前端代码无法直接向网站B的API发送请求，除非网站B允许跨域请求。为了解决这个问题，出现了CORS（跨域资源共享）技术。本文将介绍如何在PHP-Slim框架中使用CORS跨域请求。一、什么是CORSCORS是一种机制，它通过在相应的HTTP头中添加一些额

web标准是什么东西 Oct 18, 2023 pm 05:24 PM

Web标准是一组由W3C和其他相关组织制定的规范和指南，它包括HTML、CSS、JavaScript、DOM、Web可访问性和性能优化等方面的标准化，通过遵循这些标准，可以提高页面的兼容性、可访问性、可维护性和性能。Web标准的目标是使Web内容能够在不同的平台、浏览器和设备上一致地展示和交互，提供更好的用户体验和开发效率。

如何使用Flask-CORS实现跨域资源共享 Aug 02, 2023 pm 02:03 PM

如何使用Flask-CORS实现跨域资源共享引言：在网络应用开发中，跨域资源共享（CrossOriginResourceSharing，简称CORS）是一种机制，允许服务器与指定的来源或域名之间共享资源。使用CORS，我们可以灵活地控制不同域之间的数据传输，实现安全、可靠的跨域访问。在本文中，我们将介绍如何使用Flask-CORS扩展库来实现CORS功

See all articles

Javaweb如何利用cors完成跨域ajax数据交互的实例分析

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题