跨域请求及其解决方案

最新推荐文章于 2024-03-20 10:10:20 发布
最新推荐文章于 2024-03-20 10:10:20 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： javaweb 跨域请求 同源策略 文章标签： java
原文链接：https://blog.csdn.net/ppxin/article/details/94717173
版权

 

 

目录

一、理论概述

1. 什么是跨域请求（Cross-domain Request）

2. 浏览器的同源策略（Same-origin Policy）

3. 存在的安全风险

4. CSRF攻击简介

二、跨域方案

1. 跨域资源共享（CORS）

（1）CORS简单请求

（2）CORS非简单请求（也称预检请求）

预检请求与重定向        

附带身份凭证的请求

附带身份凭证的请求与通配符

HTTP 响应首部字段

HTTP 请求首部字段 

2. JSONP请求

3. JSONP和CORS请求比较

4.子域跨父域

5. iframe跨父窗口

6. window.postMessage

7. 使用代理避开跨域请求

一、理论概述

1. 什么是跨域请求（Cross-domain Request）

​        在 HTML 中，<a>, <form>, <img>, <script>, <iframe>, <link> 等标签以及 Ajax 都可以指向一个资源地址，而所谓的跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不同时的请求。这里的域指的是这样的一个概念：我们认为如果 “协议 + 域名 + 端口号” 均相同，那么就是同域。

        举个例子：假如一个域名为 aaa.cn的网站，它发起一个资源路径为 aaa.cn/books/getBookInfo的 Ajax 请求，那么这个请求是同域的，因为资源路径的协议、域名以及端口号与当前域一致（例子中协议名默认为http，端口号默认为80）。但是，如果发起一个资源路径为 bbb.com/pay/purchase的 Ajax 请求，因为请求域 http://bbb.com:80和发起请求的域 http://aaa.cn:80不同，那么这个请求就是跨域请求。

2. 浏览器的同源策略（Same-origin Policy）

        同源策略（Same origin policy）是一种约定，它是浏览器最核心也是最基本的安全功能。出于安全考虑，浏览器限制从JS脚本发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API都遵循同源策略。

  • 域名、协议、端口有一个不同就不是同源，三者均相同，这两个网站才是同源
  • DOM 层面的同源策略：限制了来自不同源的”Document”对象或 JS 脚本，对当前“document”对象的读取或设置某些属性
  • Cookie和XMLHttprequest层面的同源策略：禁止 Ajax 直接发起跨域HTTP请求（其实可以发送请求，结果被浏览器拦截，不展示），同时 Ajax 请求不能携带与本网站不同源的 Cookie。
  • 同源策略的非绝对性：<script><img><iframe><link><video><audio>等带有src属性的标签可以从不同的域加载和执行资源。
  • 其他插件的同源策略：flash、java applet、silverlight、googlegears等浏览器加载的第三方插件也有各自的同源策略，只是这些同源策略不属于浏览器原生的同源策略，如果有漏洞则可能被黑客利用，从而留下XSS攻击的后患

        因为同源策略的限制，不同协议(http、https)、域名或者端口无法直接进行JS ajax请求。 同源策略只针对于浏览器端，浏览器一旦检测到请求的结果的域名不一致后，会堵塞请求结果。这里注意，跨域请求是可以发去的，但是请求响应response被浏览器堵塞了。

        那么问题又来了，如果恶意网站使用这个方法伪造一个转账请求，是不是就可以得逞了呢？答案是否定的。因为同源策略限制了不同源脚本之间的访问，也就是说恶意js脚本无法获取用户在银行网站的Cookie（网站身份验证的token会短期存放在Session中或较长期存放在Cookie中），而实际上在JS跨域请求时，浏览器既不会带跨域网站的cookie，也不会带上恶意网站的cookie。

        另外，浏览器为什么仅仅限制读（即浏览器拦截请求结果）呢？一方面如果访问的是黑网站，那么网站无法跟据请求结果继续下一步的操作，如不断地猜测密码；另一方面如果访问的是白网站，block掉请求结果，应该是考虑到了请求结果可能会使得页面重定向，或者是给网页添加一个恶意的iframe之类的。        

3. 存在的安全风险

        由于同源策略的限制，跨域的ajax请求不会带上cookie，然而 script / iframe / img 等标签却是支持跨域的，所以在请求的时候是会带上cookie的。如果登陆了Abank.com，那么cookie里面就有了tocken，同时又打开了另外一个标签页访问了evil.com，而这个页面中有如下一个iframe， 这个iframe的src是一个指向Abank.com的转账请求，如果Abank.com的转账请求没有第二重加密措施的话，那么请求转账就成功了！

<iframe src="http://Abank.com/app/transferFunds?amount=1500&destinationAccount=... >

       第二个例子是路由器的配置，假设我在网上找到了一个路由器配置教程的网站。这个网站里面偷偷地加一个img标签：

<img src=”http://192.168.1.1/admin/config/outsideInterface?nexthop=123.45.67.89” alt=”pwned” height=”1” width=”1”/>

        其中192.168.1.1是很多路由器的配置地址。这个1像素的图片没加载出来被忽略了，但是它的请求却发出去了。这个请求给路由器添加了一个vpn代理，指向黑客的代理服务器。如果路由器也是把登陆验证放在cookie里面，那么这个设置vpn的请求很可能就成功了，以后的连接路由器的每个请求都会先经过黑客的服务。

        到这里，很明显一个防CSRF攻击的策略就是将token添加到请求的参数里面，也就是说每个需要验证身份的请求都要显式地带上token值（因为不能跨域读取token，只能利用img等标签的自动带cookie漏洞）。详见：Cross-Site Request Forgery Guide: Learn All About CSRF Attacks and CSRF Protection

4. CSRF攻击简介

        CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。

​         CSRF 攻击的原理大致描述如下：有两个网站，其中A网站是真实受信任的网站，而B网站是危险网站。在用户登陆了受信任的A网站是，本地会存储A网站相关的Cookie，并且浏览器也维护这一个Session会话。这时，如果用户在没有登出A网站的情况下访问危险网站B，那么危险网站B就可以模拟发出一个对A网站的请求（跨域请求）对A网站进行操作，而在A网站的角度来看是并不知道请求是由B网站发出来的（Session和Cookie均为A网站的），这时便成功发动一次CSRF 攻击。

  ​      因而 CSRF 攻击可以简单理解为：攻击者盗用了你的身份，以你的名义发送请求。CSRF能够做的事情包括：以你的名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。

 ​       因此，大多数浏览器都会对跨域请求作出限制，这是从浏览器层面上的对 CSRF 攻击的一种防御，但是需要注意的是在复杂的网络环境中借助浏览器来防御 CSRF 攻击并不足够，还需要从服务端或者客户端方面入手防御，详细可以参考这篇文章浅谈CSRF攻击方式。

二、跨域方案

        虽然在安全层面上同源限制是必要的，但有时同源策略会对我们的合理用途造成影响，为了避免开发的应用受到限制，有多种方式可以绕开同源策略，下面注重介绍的是经常使用的 JSONP, CORS 方法。

1. 跨域资源共享（CORS）

        跨源资源共享 Cross-Origin Resource Sharing (CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。

        另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

        CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

        CORS请求失败会产生错误，但是为了安全，在JavaScript代码层面是无法获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。

        浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

（1）CORS简单请求

        某些请求不会触发 CORS 预检请求，本文称这样的请求为“简单请求”。请注意，该术语并不属于 Fetch （其中定义了 CORS）规范。若请求满足所有下述条件（参考mozilla浏览器 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#%E7%AE%80%E5%8D%95%E8%AF%B7%E6%B1%82），则该请求可视为“简单请求”：

        比如说，假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。http://foo.example 的网页中可能包含类似于下面的 JavaScript 代码：

 var invocation = new XMLHttpRequest();

var url = 'http://bar.other/resources/public-data/';


function callOtherDomain() {

if(invocation) {

invocation.open('GET', url, true);

invocation.onreadystatechange = handler;

invocation.send();

}

}

  1.  

客户端和服务器之间使用 CORS 首部字段来处理跨域权限：

 

分别检视请求报文和响应报文：

 GET /resources/public-data/ HTTP/1.1

Host: bar.other

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

Referer: http://foo.example/examples/access-control/simpleXSInvocation.html

Origin: http://foo.example



HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 00:23:53 GMT

Server: Apache/2.0.61

Access-Control-Allow-Origin: *

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Transfer-Encoding: chunked

Content-Type: application/xml


[XML Data]

  1.  

第 1~10 行是请求首部。第10行 的请求首部字段 Origin 表明该请求来源于 http://foo.exmaple。

第 13~22 行是来自于 http://bar.other 的服务端响应。响应中携带了响应首部字段 Access-Control-Allow-Origin（第 16 行）。使用 Origin 和 Access-Control-Allow-Origin 就能完成最简单的访问控制。本例中，服务端返回的 Access-Control-Allow-Origin: * 表明，该资源可以被任意外域访问。如果服务端仅允许来自 http://foo.example 的访问，该首部字段的内容如下：

Access-Control-Allow-Origin: http://foo.example

现在，除了 http://foo.example，其它外域均不能访问该资源（该策略由请求首部中的 ORIGIN 字段定义，见第10行）。Access-Control-Allow-Origin 应当为 * 或者包含由 Origin 首部字段所指明的域名。

（2）CORS非简单请求（也称预检请求）

        与前述简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS   方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

        当请求满足下述任一条件（mozilla浏览器 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#%E9%A2%84%E6%A3%80%E8%AF%B7%E6%B1%82）时，即应首先发送预检请求：

注意: WebKit Nightly 和 Safari Technology Preview 为Accept, Accept-Language, 和 Content-Language 首部字段的值添加了额外的限制。如果这些首部字段的值是“非标准”的，WebKit/Safari 就不会将这些请求视为“简单请求”。WebKit/Safari 并没有在文档中列出哪些值是“非标准”的，不过我们可以在这里找到相关讨论：Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language, Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS, and Switch to a blacklist model for restricted Accept headers in simple CORS requests。其它浏览器并不支持这些额外的限制，因为它们不属于规范的一部分。

如下是一个需要执行预检请求的 HTTP 请求：

 var invocation = new XMLHttpRequest();

var url = 'http://bar.other/resources/post-here/';

var body = '<?xml version="1.0"?><person><name>Arun</name></person>';


function callOtherDomain(){

if(invocation)

{

invocation.open('POST', url, true);

invocation.setRequestHeader('X-PINGOTHER', 'pingpong');

invocation.setRequestHeader('Content-Type', 'application/xml');

invocation.onreadystatechange = handler;

invocation.send(body);

}

}


......

        上面的代码使用 POST 请求发送一个 XML 文档，该请求包含了一个自定义的请求首部字段（X-PINGOTHER: pingpong）。另外，该请求的 Content-Type 为 application/xml。因此，该请求需要首先发起“预检请求”。

   

 OPTIONS /resources/post-here/ HTTP/1.1

Host: bar.other

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-aliveOrigin: http://foo.example

Access-Control-Request-Method: POST

Access-Control-Request-Headers: X-PINGOTHER, Content-Type



HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:39 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin: http://foo.example

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

Access-Control-Max-Age: 86400

Vary: Accept-Encoding, Origin

Content-Encoding: gzip

Content-Length: 0

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Content-Type: text/plain

  1.  

  2.  

    预检请求完成之后，发送实际请求：

POST /resources/post-here/ HTTP/1.1

Host: bar.other

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

X-PINGOTHER: pingpong

Content-Type: text/xml; charset=UTF-8

Referer: http://foo.example/examples/preflightInvocation.html

Content-Length: 55

Origin: http://foo.example

Pragma: no-cache

Cache-Control: no-cache


<?xml version="1.0"?><person><name>Arun</name></person>



HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:15:40 GMT

Server: Apache/2.0.61 (Unix)

Access-Control-Allow-Origin: http://foo.example

Vary: Accept-Encoding, Origin

Content-Encoding: gzip

Content-Length: 235

Keep-Alive: timeout=2, max=99

Connection: Keep-Alive

Content-Type: text/plain


[Some GZIP'd payload]

浏览器检测到，从 JavaScript 中发起的请求需要被预检。从上面的报文中，我们看到，第 1~12 行发送了一个使用 OPTIONS 方法的“预检请求”。 OPTIONS 是 HTTP/1.1 协议中定义的方法，用以从服务器获取更多信息。该方法不会对服务器资源产生影响。 预检请求中同时携带了下面两个首部字段：

接下来的内容将讨论相关场景，并剖析该机制所涉及的 HTTP 首部字段。

 Access-Control-Request-Method: POST

Access-Control-Request-Headers: X-PINGOTHER, Content-Type

  首部字段 Access-Control-Request-Method 告知服务器，实际请求将使用 POST 方法。首部字段 Access-Control-Request-Headers 告知服务器，实际请求将携带两个自定义请求首部字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。

第14~26 行为预检请求的响应，表明服务器将接受后续的实际请求。重点看第 17~20 行：

 Access-Control-Allow-Origin: http://foo.example

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

Access-Control-Max-Age: 86400

        首部字段 Access-Control-Allow-Methods 表明服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求。该字段与 HTTP/1.1 Allow: response header 类似，但仅限于在需要访问控制的场景中使用。

        首部字段 Access-Control-Allow-Headers 表明服务器允许请求中携带字段 X-PINGOTHER 与 Content-Type。与 Access-Control-Allow-Methods 一样，Access-Control-Allow-Headers 的值为逗号分割的列表。

        最后，首部字段 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。

预检请求与重定向        

大多数浏览器不支持针对于预检请求的重定向。如果一个预检请求发生了重定向，浏览器将报告错误：

The request was redirected to 'https://example.com/foo', which is disallowed for cross-origin requests that require preflight

Request requires preflight, which is disallowed to follow cross-origin redirect

CORS 最初要求该行为，不过在后续的修订中废弃了这一要求。

在浏览器的实现跟上规范之前，有两种方式规避上述报错行为：

  • 在服务端去掉对预检请求的重定向；
  • 将实际请求变成一个简单请求。

如果上面两种方式难以做到，我们仍有其他办法：

不过，如果请求是由于存在 Authorization 字段而引发了预检请求，则这一方法将无法使用。这种情况只能由服务端进行更改。

附带身份凭证的请求

Fetch 与 CORS 的一个有趣的特性是，可以基于  HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

本例中，http://foo.example 的某脚本向 http://bar.other 发起一个GET 请求，并设置 Cookies：

 var invocation = new XMLHttpRequest();

var url = 'http://bar.other/resources/credentialed-content/';


function callOtherDomain(){

if(invocation) {

invocation.open('GET', url, true);

invocation.withCredentials = true;

invocation.onreadystatechange = handler;

invocation.send();

}

}

第 7 行将 XMLHttpRequest 的 withCredentials 标志设置为 true，从而向服务器发送 Cookies。因为这是一个简单 GET 请求，所以浏览器不会对其发起“预检请求”。但是，如果服务器端的响应中未携带 Access-Control-Allow-Credentials: true ，浏览器将不会把响应内容返回给请求的发送者。

 

客户端与服务器端交互示例如下：

 GET /resources/access-control-with-credentials/ HTTP/1.1

Host: bar.other

User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection: keep-alive

Referer: http://foo.example/examples/credential.html

Origin: http://foo.example

Cookie: pageAccess=2



HTTP/1.1 200 OK

Date: Mon, 01 Dec 2008 01:34:52 GMT

Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2

X-Powered-By: PHP/5.2.6

Access-Control-Allow-Origin: http://foo.example

Access-Control-Allow-Credentials: true

Cache-Control: no-cache

Pragma: no-cache

Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT

Vary: Accept-Encoding, Origin

Content-Encoding: gzip

Content-Length: 106

Keep-Alive: timeout=2, max=100

Connection: Keep-Alive

Content-Type: text/plain



[text/plain payload]

即使第 11 行指定了 Cookie 的相关信息，但是，如果 bar.other 的响应中缺失 Access-Control-Allow-Credentials: true（第 19 行），则响应内容不会返回给请求的发起者。

附带身份凭证的请求与通配符

对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。

这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。

另外，响应首部中也携带了 Set-Cookie 字段，尝试对 Cookie 进行修改。如果操作失败，将会抛出异常。

HTTP 响应首部字段

本节列出了规范所定义的响应首部字段。上一小节中，我们已经看到了这些首部字段在实际场景中是如何工作的。

Access-Control-Allow-Origin

响应首部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下:

Access-Control-Allow-Origin: <origin> | *

其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。

例如，下面的字段值将允许来自 http://mozilla.com 的请求：

Access-Control-Allow-Origin: http://mozilla.com

如果服务端指定了具体的域名而非“*”，那么响应首部中的 Vary 字段的值必须包含 Origin。这将告诉客户端：服务器对不同的源站返回不同的内容。

Access-Control-Expose-Headers

译者注：在跨域访问时，XMLHttpRequest对象的getResponseHeader()方法只能拿到一些最基本的响应头，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

Access-Control-Expose-Headers 头让服务器把允许浏览器访问的头放入白名单，例如：

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

这样浏览器就能够通过getResponseHeader访问X-My-Custom-Header和 X-Another-Custom-Header 响应头了。

Access-Control-Max-Age

Access-Control-Max-Age 头指定了preflight请求的结果能够被缓存多久，请参考本文在前面提到的preflight例子。

Access-Control-Max-Age: <delta-seconds>

delta-seconds 参数表示preflight请求的结果在多少秒内有效。

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials 头指定了当浏览器的credentials设置为true时是否允许浏览器读取response的内容。当用在对preflight预检测请求的响应中时，它指定了实际的请求是否可以使用credentials。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。

Access-Control-Allow-Credentials: true

上文已经讨论了附带身份凭证的请求。

Access-Control-Allow-Methods

Access-Control-Allow-Methods 首部字段用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。

Access-Control-Allow-Methods: <method>[, <method>]*

相关示例见这里。

Access-Control-Allow-Headers

Access-Control-Allow-Headers 首部字段用于预检请求的响应。其指明了实际请求中允许携带的首部字段。

Access-Control-Allow-Headers: <field-name>[, <field-name>]*

HTTP 请求首部字段 

本节列出了可用于发起跨域请求的首部字段。请注意，这些首部字段无须手动设置。 当开发者使用 XMLHttpRequest 对象发起跨域请求时，它们已经被设置就绪。

Origin

Origin 首部字段表明预检请求或实际请求的源站。

Origin: <origin>

origin 参数的值为源站 URI。它不包含任何路径信息，只是服务器名称。

Note: 有时候将该字段的值设置为空字符串是有用的，例如，当源站是一个 data URL 时。

注意，不管是否为跨域请求，ORIGIN 字段总是被发送。

Access-Control-Request-Method

Access-Control-Request-Method 首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。

Access-Control-Request-Method: <method>

相关示例见这里。

Access-Control-Request-Headers

Access-Control-Request-Headers 首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。

Access-Control-Request-Headers: <field-name>[, <field-name>]*

相关示例见这里。

规范

SpecificationStatusComment
Fetch
CORS		Living StandardNew definition; supplants CORS specification.
UnknownUnknownInitial definition.

浏览器兼容性

Update compatibility data on GitHub

                                                   Desktop                                                    Mobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Access-Control-Allow-Origin     4  12    3.5      10   12   4      2   YES     4     12   3.2    YES

注

  • IE 10 提供了对规范的完整支持，但在较早版本（8 和 9）中，CORS 机制是借由 XDomainRequest 对象完成的。
  • Firefox 3.5 引入了对 XMLHttpRequests 和 Web 字体的跨域支持（但最初的实现并不完整，这在后续版本中得到完善）；Firefox 7 引入了对 WebGL 贴图的跨域支持；Firefox 9 引入了对 drawImage 的跨域支持。

2. JSONP请求

        JSON的核心是：动态添加<script>标签来调用服务器提供的js脚本。JQuery ajax本质上是通过script标签实现跨域请求，而非真正的ajax请求。整个过程可简单描述为：客户端跨域请求数据responseData，然后使用客户端js函数handleResponse（responseData）对数据进行处理。具体实现思路为：客户端封装一个脚本请求如<script src="https://www.jsonp_request.com/request_method?callback=handleResponse&param1=valu1...">，其中handleResponse为本地JS函数；然后，服务器端获取callback的回调函数名即handleResponse后，将处理结果responseData，包装成javascript函数调用的形式，即字符串“handleResponse({responseData的json数据})”传回客户端；最后，客户端使用eval(返回字符串);执行返回结果。

        JQuery封装JSONP请求：对于经常使用jQuery的开发者来说，肯定注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery实现JSONP</title>

</head>

<body>

<div id="mydiv">

<button id="btn">点击</button>

</div>

</body>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script type="text/javascript">

$(function(){

$("#btn").click(function(){


$.ajax({

async : true,

url : "https://api.douban.com/v2/book/search",

type : "GET", //如果是跨域请求或将crossDomain设置为true，则type只能是GET

dataType : "jsonp", // 返回的数据类型，设置为JSONP方式

jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback

jsonpCallback: 'handleResponse', //设置回调函数名，默认jquery自定义

data : {

q : "javascript",

count : 1

},

success: function(response, status, xhr){ //返回数据，即response.data

console.log('状态为：' + status + ',状态是：' + xhr.statusText);

console.log(response);

}

});

});

});

</script>

        大家可能注意到，JQuery是怎么实现返回数据的？其实，在JQuery的JSONP实现中，首先将你在success中定义的函数封装成jsonpCallback定义的函数，然后再封装一个脚本请求如<script src="https://api.douban.com/v2/book/search?callback=handleResponse&q=javascript&count=1">。

3. JSONP和CORS请求比较

        JSONP请求，缺点是仅支持GET请求，必须完全信任提供服务的第三方，优点是支持老式浏览器，兼容性较好。

        CORS比JSONP更强大，支持所有类型的HTTP请求。

4.子域跨父域

        子域跨父域是支持的，但是需要显式将子域的域名改成父域的，例如mail.mysite.com要请求mysite.com的数据，那么在mail.mysite.com脚本里需要执行：

document.domain = "mysite.com";

5. iframe跨父窗口

        如果iframe与父窗口也有同源策略的限制，父域无法直接读取不同源的iframe的DOM内容以及监听事件，但是iframe可以调用父窗口提供的api。iframe通过window.parent得到父窗口的window对象，然后父窗口定义一个全局对象供iframe调用。

        例如在页面通过iframe的方式嵌入一个youtobe的视频，如果需要手动播放视频、监听iframe的播放事件，页面需要引入youtobe的视频播放控制api，在这个js文件里面定义了一个全局对象YT:

if (!window['YT']) {var YT = {loading: 0,loaded: 0};}

而在视频iframe的脚本里通过window.parent获取得到父窗口即自己网站的页面：

sr = new Cq(window.parent, d, b)

自已网站的页面也是在这个YT对象自定义一些东西，如添加播放事件监听：

new YT.Player('video', { events:{ 'onStateChange': function(data){... } } });

6. window.postMessage

在上面第（5）点，父窗口无法向不同源的iframe传递东西，通过window.postMessage可以做到，父窗口向iframe传递一个消息，而iframe监听消息事件。

例如在8000端口的页面嵌入了一个9000端口的iframe：

<iframe src="http://server.com:9000"></iframe>

然后9000端口post一个message：

 window.onload = function(){

window.frames[0].postMessage("hello, this is from http://localhost:8000/", "http://server.com:9000/");

}

postMessage执行的上下文必须是接收信息的window，传递两个参数，第一个是数据，第二个是目标窗口。

同时，iframe即9000端口的页面监听message事件：

 window.addEventListener("message", receiveMessage);


function receiveMessage(event){

var origin = event.origin || event.originalEvent.origin;

//身份验证

if (origin !== "http://localhost:8000"){

return;

}

console.log("receiveMessage: " + event.data);

}

这样子iframe就可收到父窗口的信息了：

同理iframe也可以向父窗口发送消息：

window.parent.postMessage("hello, this is from http://server.com:9000", "http://localhost:8000");

父窗口收到：

window.postMessage也适用于通过window.open打开的子窗口，方法类似。

补充一点，如果iframe与父窗口是同源的，则父窗口可以直接获取到iframe的内容，这个方法常用于无刷新上传文件。

7. 使用代理避开跨域请求

例如www.a.com/index.html页面去调用www.b.com/service.jsp，可以通过写一个接口www.a.com/service.jsp,由这个接口在后端去调用www.b.com/service.jsp并取到返回值，然后再返回给index.html。

 

参考链接：

1. 什么是跨域请求以及实现跨域的方案

2. Access-Control-Allow- 设置 跨域资源共享 CORS 详解

3. HTTP访问控制（CORS）

4. 同源策略和跨域请求研究

5. Jsonp解决跨域的原理及过程

 

. L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Ajax跨域问题及解决方案详析
10-17
主要给大家介绍了Ajax跨域问题以及解决方案的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Ajax具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
跨域请求解决方案及详解
weixin_46178852的博客
07-28 5100
1. 什么是跨域        跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。        同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去 （因为浏览器的同源策略导致了跨域，就是浏览器在搞事情
什么是跨域（cross-origin）请求，如何解决跨域问题？
官方推荐
08-31 8750
什么是跨域（cross-origin）请求，如何解决跨域问题？
跨域请求是什么以及如何解决跨域问题
最新发布
常备不懈
03-20 1671
跨域的本质是由浏览器的同源政策导致的一种网络请求限制。同源政策是浏览器的一项安全策略，旨在防止恶意网站读取或修改另一个网站的数据。根据同源政策，如果两个URL的协议、域名和端口号都相同，则它们属于同一个源；否则，它们属于不同的源。 当一个网页试图通过XMLHttpRequest或Fetch API发起对不同源的HTTP请求时，浏览器会阻止这种请求，这就是跨域请求。跨域请求的限制是为了保护用户免受跨站脚本攻击（XSS）和其他潜在的安全威胁。浏览器通过限制不同源之间的JavaScript脚本交互来实施这一政策
跨域解决的三种方法、四种请求方式
m0_59023231的博客
04-07 7224
跨域解决的三种方法、四种请求方式
解决跨域的三种方法
热门推荐
weixin_58448088的博客
02-21 1万+
1、详解解决跨域三种方法 2、瀑布流布局 3 、函数的节流 4、函数的防抖
跨域请求的三种解决方案
m0_52634705的博客
05-14 6087
跨域的三种解决方案一、同源策略二、解决方案1：jsonp三、解决方案2：cors二、解决方案1：jsonp 一、同源策略 ajax无法跨域请求文件。通俗讲就是“浏览器”给js发送请求的限制，你只能给自己域名下的服务器发送请求，不能向别人家的服务器发送请求。 当ajax请求的url中的传输协议、域名、端口号，有任意一个不同时，就会触发同源策略 例如：做一个外卖网站，需要地图定位功能，就可以向百度购买地图服务器的接口使用，我们请求百度的服务器，这就是跨域请求 二、解决方案1：jsonp 1、早期常用的一种解
Ajax跨域问题及解决方案（jsonp，cors）
10-16
远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理。这篇文章主要介绍了ajax跨域问题解决方案（jsonp，cors） ,需要的朋友可以参考下
Ajax请求跨域问题解决方案分析
10-17
主要介绍了Ajax请求跨域问题解决方案,结合具体实例形式分析了Ajax请求跨域问题的原理、解决方法及相关操作注意事项,需要的朋友可以参考下
ajax跨域访问遇到的问题及解决方案
01-19
而script、script、iframe标签的src属性就不存在跨域的问题，所以Ajax跨域就是利用这一点以及js对JSON的支持，外部服务只要给Ajax的请求响应一段JS代码或JSON数据，就能被Ajax获取到。 由于安全方面的原因, 客户端js...
JQuery的Ajax跨域请求原理概述及实例
10-27
ajax跨域请求的问题，JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式，接下来为大家详细介绍下客户端JQuery.ajax的调用代码
跨域请求(资源)十一种请求方式
点点的博客
04-12 2602
一、什么是跨域请求 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表： 二、解决跨域方法 1、JSONP 1) JSONP原理 利用<script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。 注意：JSONP都是GET和异步请求的，不存...
跨域请求
无
05-21 1699
跨域请求 ​ 跨域请求就是指：当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为如果协议 + 域名 + 端口号均相同，那么就是同域，否则则是跨域的 ​ 跨域请求是由于浏览器的同源策略导致的，浏览器的同源策略是不能没有的（同源策略是浏览器最核心最基础的安全策略） 同源策略禁止 Ajax 直接发起跨域HTTP请求（其实可以发送请求，结果被浏览器拦截，不展示），同...
前端常见跨域解决方案（全）
兰亭古墨
10-06 556
前端常见跨域解决方案（全） 什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求：
掌握 CORS 跨域请求，读这篇文章就够了
360技术
11-22 2711
在 Web 前后端分离架构模式下，跨域（跨源）请求属于日常的基本情况了。浏览器出于安全考虑，会限制 JavaScript（简称 JS）脚本内发起跨源 HTTP 请求，同源没有此类限制。前端解决跨域方法有很多，比如WebSocket 协议跨域、JSONP 请求跨域和跨域资源共享 CORS等。01CORS 简介CORS 全称为 Cross-Origin Resource Sharing，被译为跨域...
解决跨域请求的四种方法
belle_mei的博客
04-20 7986
跨域 跨域就是请求的url中的“协议”、“域名”、“端口号”其中任何一种不一样都是属于跨域。解决跨域的主要的四种方法是jsonp、跨域资源共享CORS(Cross-Origin Resource Sharing)、proxy代理、webpack中间件。 jsonp解决跨域 jsonp只能解决get方法。 在这里设置两个不同的域名，即http://localhost:3000与http://localhost:3001，端口号不同即为跨域。 为jsonp启动两个不同服务，前端端口号为3000，利用nod
跨域请求(CORS)
咸鱼!!!
06-03 437
跨域请求 原因 跨域请求出现的原因: 前后端分离,导致前后端处在不同的域名上面 解决办法 1.安装第三方扩展 pip install django-cors-headers 2.添加应用 在settings.py文件中添加 'corsheaders', 3.添加中间键 在settings.py文件中添加 'corsheaders.middleware.CorsMiddleware', ...
【Web】跨域请求
qq_45677671的博客
02-23 942
文章目录同源策略实现一个跨域请求JSONPscript 标签的本质配置代理正向代理反向代理 同源策略 同源策略是由浏览器给的 浏览器不允许我们向别人发送请求，只能向自己的服务器发送请求 当我们向别人的服务器发送请求的时候，就会被浏览器阻止了 什么是“别人的服务器”？ 当 请求协议/域名/端口号 有任意一个不同的时候，那么就算是别人的服务器 这个时候就会触发同源策略 我们管触发了同源策略的请求叫做跨越请求 实现一个跨域请求 有的时候我们是需要实现跨域请求的 我们需要多个服务器给一个页面提供数据 那
前后端跨域问题怎么解决
07-27
回答: 前后端跨域问题可以通过以下几种方式解决。首先，可以在后端设置响应头部信息，允许特定的域名访问接口，这样前端就可以跨域访问后端接口了。其次，可以使用JSONP(JSON with Padding)来实现跨域请求，JSONP利用了script标签不受同源策略限制的特性，通过动态创建script标签，将请求的数据作为参数传递给后端，后端返回的数据会被包裹在一个函数调用中返回给前端。另外，还可以使用CORS(Cross-Origin Resource Sharing)来解决跨域问题，CORS是一种基于HTTP头部的机制，通过在请求头中添加特定的字段，告诉浏览器允许跨域访问。最后，还可以通过代理服务器来解决跨域问题，前端发送请求到代理服务器，代理服务器再将请求转发给后端，这样就避免了浏览器的同源策略限制。以上是几种常见的解决跨域问题的方法。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [前后端解决跨域五种方案](https://blog.csdn.net/m0_58528901/article/details/123775417)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [前后端分离项目跨域问题及解决方案](https://blog.csdn.net/u010559460/article/details/105602272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [解决前后端分离跨域问题的几种方法](https://blog.csdn.net/weixin_43986153/article/details/124465918)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值