`

ajax跨域

    博客分类:
  • web
 
阅读更多

受瀏覽器的同源策略限制,JavaSript只能請求本域內的資源。跨域資源共享(Cross-Origin Resource Sharing, CORS)是为解决Ajax技術難實現跨域問題而提出的一個規範,這個規範試着從根本上解决安全的跨域資源共享問題。在此之前,解决此類問題的途徑往往是服務器代理、JSONP等,治標不治本。目前基本所有瀏覽器都已經支持該規範。

一個域是由schema、host、port三者共同組成,與路徑無關。所謂跨域,是指在http://example-foo.com/域上通過XMLHttpRequest對象調用http://example-bar.com/域上的資源。CORS約定服務器端和瀏覽器在HTTP協議之上,通過一些額外HTTP頭部信息,進行跨域資源共享的協商。服務器端和瀏覽器都必需遵循規範中的要求。

CORS把HTTP請求分成兩類,不同類別按不同的策略進行跨域資源共享協商。

1. 簡單跨域請求。
當HTTP請求出現以下兩種情況時,瀏覽器認为是簡單跨域請求:

1). 請求方法是GET、HEAD或者POST,並且當請求方法是POST時,Content-Type必須是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一個值。
2). 請求中沒有自定義HTTP頭部。

對於簡單跨域請求,瀏覽器要做的就是在HTTP請求中添加Origin Header,將JavaScript腳本所在域填充進去,向其他域的服務器請求資源。服務器端收到一個簡單跨域請求後,根據資源權限配置,在響應頭中添加Access-Control-Allow-Origin Header。瀏覽器收到響應後,查看Access-Control-Allow-Origin Header,如果當前域已經得到授權,則將結果返回给JavaScript。否則瀏覽器忽略此次響應。

2. 帶預檢(Preflighted)的跨域請求。
當HTTP請求出現以下兩種情況時,瀏覽器認为是帶預檢(Preflighted)的跨域請求:

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 請求中出現自定義HTTP頭部。

帶預檢(Preflighted)的跨域請求需要瀏覽器在發送真實HTTP請求之前先發送一個OPTIONS的預檢請求,檢測服務器端是否支持真實請求進行跨域資源訪問,真實請求的信息在OPTIONS請求中通過Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述,此外與簡單跨域請求一样,瀏覽器也會添加Origin Header。服務器端接到預檢請求後,根據資源權限配置,在響應頭中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header,分別表示允許跨域資源請求的域、請求方法和請求頭。此外,服務器端還可以加入Access-Control-Max-Age Header,允許瀏覽器在指定時間內,無需再發送預檢請求進行協商,直接用本次協商結果即可。瀏覽器根據OPTIONS請求返回的結果來决定是否繼續發送真實的請求進行跨域資源訪問。這個過程對真實請求的調用者來說是透明的。

XMLHttpRequest支持通過withCredentials屬性實現在跨域請求攜帶身份信息(Credential,例如Cookie或者HTTP認證信息)。瀏覽器將攜帶Cookie Header的請求發送到服務器端後,如果服務器沒有響應Access-Control-Allow-Credentials Header,那麼瀏覽器會忽略掉這次響應。

這裏討論的HTTP請求是指由Ajax XMLHttpRequest對象發起的,所有的CORS HTTP請求頭都可由瀏覽器填充,無需在XMLHttpRequest對象中設置。以下是CORS協議規定的HTTP頭,用來進行瀏覽器發起跨域資源請求時進行協商:
1. Origin。HTTP請求頭,任何涉及CORS的請求都必需攜帶。
2. Access-Control-Request-Method。HTTP請求頭,在帶預檢(Preflighted)的跨域請求中用來表示真實請求的方法。
3. Access-Control-Request-Headers。HTTP請求頭,在帶預檢(Preflighted)的跨域請求中用來表示真實請求的自定義Header列表。
4. Access-Control-Allow-Origin。HTTP響應頭,指定服務器端允許進行跨域資源訪問的來源域。可以用通配符*表示允許任何域的JavaScript訪問資源,但是在響應一個攜帶身份信息(Credential)的HTTP請求時,Access-Control-Allow-Origin必需指定具體的域,不能用通配符。
5. Access-Control-Allow-Methods。HTTP響應頭,指定服務器允許進行跨域資源訪問的請求方法列表,一般用在響應預檢請求上。
6. Access-Control-Allow-Headers。HTTP響應頭,指定服務器允許進行跨域資源訪問的請求頭列表,一般用在響應預檢請求上。
7. Access-Control-Max-Age。HTTP響應頭,用在響應預檢請求上,表示本次預檢響應的有效時間。在此時間內,瀏覽器都可以根據此次協商結果决定是否有必要直接發送真實請求,而無需再次發送預檢請求。
8. Access-Control-Allow-Credentials。HTTP響應頭,凡是瀏覽器請求中攜帶了身份信息,而響應頭中沒有返回Access-Control-Allow-Credentials: true的,瀏覽器都會忽略此次響應。

分享到:
评论

相关推荐

    ajax跨域解决办法

    【AJAX跨域解决办法】 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下更新部分网页的技术。然而,由于浏览器的同源策略限制,AJAX请求通常只能发送到与当前页面同一源的...

    Spring Boot Redis Session 共享(Ajax 跨域)

    本教程将详细讲解如何在Spring Boot项目中利用Redis来存储和共享Session,并解决Ajax跨域问题。 首先,我们需要理解Spring Boot中的Session管理。默认情况下,Spring Boot使用内存中的HttpSession来存储用户会话...

    demo跨域ajax_DEMO_ajax跨域_

    本示例“demo跨域ajax_DEMO_ajax跨域”着重解决C#后端与JavaScript前端之间的跨域限制。这里我们将深入探讨什么是跨域、为何会产生跨域问题以及如何通过C#和Ajax实现跨域通信。 首先,我们需要了解什么是跨域。根据...

    Javascript跨域和Ajax跨域解决方案

    JavaScript跨域和Ajax跨域是Web开发中常见的问题,尤其在进行前后端分离或API调用时,由于浏览器的同源策略限制,不同域名、协议或端口的资源请求会被阻止,这就是所谓的“跨域”。本文将深入探讨JavaScript和Ajax...

    ajax跨域调用wcf实例

    以下是实现AJAX跨域调用WCF服务的具体步骤和相关知识点: 1. **开启WCF服务的跨域支持**:在WCF服务的配置文件(通常是ServiceName.svc.cs或IServiceName.cs)中,需要启用跨域资源共享(CORS)。这可以通过添加`...

    Ajax跨域详解与代码

    **Ajax跨域详解** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许我们实现页面的异步更新,无需刷新整个页面即可获取并展示新数据。然而,由于浏览器的安全策略,同一源策略(Same-Origin Policy)...

    Ajax跨域访问解决方案

    **Ajax跨域访问解决方案** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,提升用户体验。然而,由于浏览器的同源策略限制,Ajax请求只能向同源(协议、域名和端口相同)...

    cors技术解决ajax跨域

    **CORS技术详解:解决AJAX跨域问题** 在Web开发中,由于浏览器的同源策略限制,AJAX请求只能向同一源(协议+域名+端口)发送,这在跨域请求时会遇到障碍。为了解决这个问题,CORS(Cross-Origin Resource Sharing,...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    解决ajax跨域问题

    ### 解决Ajax跨域问题 在现代Web开发中,跨域问题经常出现并困扰着开发者。根据提供的文件信息,本文将详细介绍如何通过JSONP等方法解决Ajax跨域问题。 #### Ajax与同源策略 首先,我们需要了解为什么会出现跨域...

    解决ajax跨域请求问题

    本文将深入探讨如何解决Ajax跨域请求的问题。 首先,理解“同源策略”是解决问题的关键。同源策略是浏览器为了保障网络安全而设定的一种机制,它禁止了一个源的文档或脚本访问另一个源的属性,这里的“源”指的是...

    怎样实现Ajax 跨域访问

    ### 如何实现Ajax跨域访问 在Web开发中,由于同源策略的限制,JavaScript只能对同源的页面进行操作,不能对不同源的页面进行请求。然而,在实际的应用场景中,经常会出现需要向不同域名下的服务器发起请求的情况。...

    Ajax跨域访问(ASP.NET Web)

    本教程将重点讲解如何在ASP.NET Web环境中处理Ajax跨域访问。 一、理解同源策略 同源策略是浏览器为了保护用户安全而实施的一项安全机制,它禁止了一个源(domain)的文档或脚本获取或操作另一个源的资源。这意味着...

    IE7 Ajax跨域问题

    标题 "IE7 Ajax跨域问题" 涉及到的是在使用Ajax技术在Internet Explorer 7(IE7)浏览器中处理跨域请求时遇到的挑战。在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器...

    ajax跨域上传文件.zip

    【Ajax跨域文件上传详解】 Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,通过JavaScript异步地与服务器交换数据并更新部分网页内容。在现代Web开发中,Ajax广泛应用于创建动态和...

    ajax跨域获取数据

    但随着互联网应用的发展,这种需求变得越来越普遍,于是诞生了"ajax跨域获取数据"的技术解决方案。这个话题涵盖了多个关键知识点,包括同源策略、CORS(跨源资源共享)以及JSONP等。 1. 同源策略:同源策略是浏览器...

    Ajax跨域问题及其解决方案.docx

    ### Ajax跨域问题及其解决方案 #### 一、Ajax跨域问题概述 在现代Web开发中,前后端分离架构越来越流行。这种模式下,前端页面与后端服务通常部署在不同的服务器上,甚至可能位于不同的域名下。当浏览器发起对不同...

    Ajax跨域传输参数

    可以将book.aa.com用iframe添加到 www.aa.com的某个页面下,在www.aa.com和iframe里面都加上document.domain = "aa.com",这样就可以统一域了,可以实现跨域访问。就和平时同一个域中镶嵌iframe一样,直接调用里面的...

Global site tag (gtag.js) - Google Analytics