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 ）是一種網頁瀏覽器的技術規範，它為網頁伺服器定義了一種方式，允許網頁從不同的網域存取其資源。而這種存取是被同源策略所禁止的。 CORS系統定義了一種瀏覽器和伺服器互動的方式來決定是否允許跨網域請求。它是一個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求更安全。

1、透過Maven引用

cors-filter、

<!-- 跨域问题 --> 
  <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工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7926

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1249

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

如何使用Golang實作網頁應用程式的表單驗證 Jun 24, 2023 am 09:08 AM

表單驗證是Web應用程式開發中非常重要的環節，它能夠在提交表單資料之前對資料進行有效性檢查，避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證，本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前，我們需要知道表單驗證的基本要素是什麼。表單元素：表單元素是指

Java API 開發中使用 Jetty7 進行 Web 伺服器處理 Jun 18, 2023 am 10:42 AM

JavaAPI開發中使用Jetty7進行Web伺服器處理隨著互聯網的發展，Web伺服器已經成為了應用程式開發的核心部分，同時也是許多企業所關注的焦點。為了滿足日益增長的業務需求，許多開發人員選擇使用Jetty進行Web伺服器開發，其靈活性和可擴展性受到了廣泛的認可。本文將介紹如何在JavaAPI開發中使用Jetty7進行We

怎麼設定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

Web 端即時防擋臉彈幕（基於機器學習） Jun 10, 2023 pm 01:03 PM

防擋臉彈幕，即大量彈幕飄過，但不會遮擋視訊畫面中的人物，看起來像是從人物背後飄過去的。機器學習已經火了好幾年了，但很多人都不知道瀏覽器中也能運行這些能力；本文介紹在視頻彈幕方面的實踐優化過程，文末列舉了一些本方案可適用的場景，期望能開啟一些腦洞。 mediapipeDemo（https://google.github.io/mediapipe/）展示主流防擋臉彈幕實現原理點播up上傳視訊伺服器後台計算提取視訊畫面中的人像區域，轉換成svg儲存用戶端播放視訊的同時，從伺服器下載svg與彈幕合成，人像

web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南，它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化，透過遵循這些標準，可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互，提供更好的使用者體驗和開發效率。

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

在Web開發中，跨域請求是一個常見的問題。這是因為瀏覽器對於不同網域名稱之間的請求有嚴格的限制。例如，網站A的前端程式碼無法直接向網站B的API發送請求，除非網站B允許跨網域請求。為了解決這個問題，出現了CORS（跨域資源共享）技術。本文將介紹如何在PHP-Slim框架中使用CORS跨域請求。一、什麼是CORSCORS是一種機制，它透過在對應的HTTP頭中添加一些額

如何使用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版

熱門話題