`

设置header,实现跨域访问

阅读更多

受浏览器的同源策略限制,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的,浏览器都会忽略此次响应。

分享到:
评论

相关推荐

    golang实现跨域访问的方法

    在Golang中实现跨域访问,主要是为了克服Web应用程序中由同源策略导致的限制,使得前端能够通过Ajax从不同源获取数据。本篇将详细解释如何在Golang后端设置CORS(跨域资源共享)策略,以便允许前端进行跨域请求。 ...

    Spring Boot实现跨域访问实现代码

    本文将通过实例代码,介绍 Spring Boot 实现跨域访问的知识,并详细介绍 Spring Boot 服务器端设置允许跨域访问的方法。 首先,需要了解什么是跨域访问。跨域访问是指从一个域名下的网页去请求另一个域名下的资源,...

    JQury实现Ajax跨域访问

    **jQuery实现Ajax跨域访问** 在Web开发中,由于浏览器的同源策略限制,JavaScript通常只能访问与当前页面同一域名下的资源。然而,有时我们需要从不同的域名获取数据,例如使用第三方API服务,这时就需要借助Ajax的...

    js+jsp+json+tomcat跨域访问

    在JSP页面中,需要设置响应头允许跨域访问。可以使用以下代码: ```jsp response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, ...

    怎样实现Ajax 跨域访问

    // 设置响应头允许跨域访问 res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With...

    JAVA的AJAX跨域访问

    它利用了`<script>`标签可以从任何来源加载数据的特性,通过动态插入一个`<script>`标签来实现跨域数据请求。 #### Java环境下的CORS配置 在Java的Servlet容器中,可以通过修改Servlet过滤器或直接在Servlet中添加...

    js解决跨域访问问题

    ### JS解决跨域访问问题详解 #### 一、引言 在现代Web开发中,跨域访问问题是开发者经常面临的一个挑战。特别是在使用JavaScript进行前后端交互时,由于浏览器的同源策略限制,开发者经常会遇到跨域问题。本文将...

    解决SilverLight跨域访问问题

    - 对于支持JSONP的服务,可以在Silverlight中创建一个隐藏的`<script>`元素,动态插入到DOM中,从而实现跨域数据获取。JSONP的工作原理是返回JavaScript函数调用,而不是纯JSON数据。 - 示例代码: ```csharp ...

    .net WebUploadTest实现跨域浏览

    本文将深入探讨如何在.NET中实现跨域文件上传,即`.net WebUploadTest实现跨域浏览`这一关键功能。 首先,我们要理解什么是跨域。跨域是指浏览器的同源策略限制,它禁止了不同源(协议、域名或端口)之间的HTTP请求...

    跨域访问演示环境和代码

    跨域访问是Web开发中一个常见的挑战,尤其是在前后端分离的架构中。它涉及到浏览器的安全策略,即同源策略(Same-Origin Policy),该策略限制了JavaScript只能与同一协议、同一域名、同一端口的资源进行交互。当...

    通过nginx实现跨域请求

    标题 "通过nginx实现跨域请求" 涉及的核心知识点是网络编程中的跨域问题以及如何利用Nginx服务器作为代理来解决这个问题。Nginx是一个高性能的HTTP和反向代理服务器,它常用于配置和管理网站的访问规则,包括处理...

    JS跨域访问解决方案总结.pdf

    标题《JS跨域访问解决方案总结.pdf》指明文档的核心内容是关于JavaScript跨域访问问题的解决方法。跨域访问问题是指由于浏览器的同源策略限制,网页中JavaScript代码出于安全原因不能访问另一个源(域名、协议或端口...

    java web服务器实现跨域访问

    "java web服务器实现跨域访问" 跨域资源共享(CORS)是一种机制,允许Web页面向跨源服务器发出请求,从而克服同源策略的限制。下面是关于java web服务器实现跨域访问的知识点。 一、CORS概述 Cross-Origin ...

    cors实现的跨域

    总的来说,CORS是现代Web应用中实现跨域请求的关键技术,它使得前后端分离、微服务架构等设计模式得以顺利实施,极大地扩展了Web应用的能力边界。正确理解和使用CORS,能够帮助开发者构建更高效、更灵活的Web服务。

    在各种服务器(nginx,apache,tomcat)上设置CORS跨域设置.zip

    Apache服务器可以通过修改`.htaccess`文件或者配置httpd.conf文件来实现CORS设置。在`.htaccess`文件中,可以添加以下行来允许所有源访问: ```bash Header set Access-Control-Allow-Origin "*" ``` 如果你想限制...

    ASP.NET MVC中设置跨域访问问题

    以下是如何在ASP.NET MVC中设置跨域访问的详细步骤: 1. **理解跨域请求**: 跨域请求是指一个域下的文档或脚本尝试请求另一个域下的资源。例如,一个运行在www.example1.com上的网页尝试通过Ajax请求获取...

    webservice例子及跨域访问配置

    这个例子和跨域访问配置的主题将引导我们深入理解如何创建和调用Web服务,以及如何解决在JavaScript中跨域访问的问题。 首先,让我们探讨Web服务的核心概念。Web服务通常基于SOAP(Simple Object Access Protocol)...

    header函数设置响应头解决php跨域问题实例详解

    - 允许指定域名访问:如果只想让特定的域名如`http://a.test.com`能够跨域访问,可以这样设置: ```php header('Access-Control-Allow-Origin:http://a.test.com'); ``` 2. **设置允许访问的请求方式** - ...

    Springboot 实现跨域访问无需使用jsonp的实现代码

    在Spring Boot中,我们可以直接通过配置或者自定义拦截器来实现跨域访问。下面我们将详细介绍如何在Spring Boot应用中实现CORS,而无需使用JSONP。 1. **CORS基本概念** CORS是一种浏览器安全策略,用于限制浏览器...

Global site tag (gtag.js) - Google Analytics